在使用element-plus的日期选择组件 el-date-picker的时候,发现form表单内的日期选择框并不能跟el-input 一样把宽度撑满。而是要小一圈。

  这样在排版中显得不太整齐,但是 el-date-picker 日期组件又不跟选择框 el-select 一样,在组件加个style样式就能撑满。

1 // el-select    可以撑满
2 <el-form-item>
3 <el-select style="width:100%"></el-select>
4 </el-form-item>

  最后看了下el-date-picker 在页面的结构,好像输入框本身就没有撑满整个宽度,那么直接在 el-date-picker 外面加个100%宽度的容器即可。

结果

1 <el-form-item>
2 <div style="width:100%">
3 <el-date-picker type="date" style="width:100%"></el-date-picker>
4 </div>
5 </el-form-item>

el-date-picker 本身和外边的容器都要加style样式,要不不起作用。

el-date-picker 在表单中宽度(width)问题的更多相关文章

  1. 在jsp中用EL 表达来获取表单中的参数

     在一个JSP页面转到另一个JSP页面时,对表单中的参数用EL表达式提取为:     <form action="sampleJsp.jsp" method="po ...

  2. javascript date picker

    一个简洁的date picker <html><head><meta http-equiv="Content-Type" content=" ...

  3. Js 向表单中添加多个元素

    @{ ViewBag.title = "地图导航"; } @model YT.XWAJ.Public.Application.MapNavigation.Dto.MapNaviga ...

  4. 在vue中的form表单中下拉框中的数据来自数据库查询到的数据

    文章目录 1.实现的效果: 2.前端html代码 3.js中的代码 4.后端的方法 1.实现的效果: 增加一个新的类型到数据库 2.前端html代码 需要注意的部分:prop后边是表单中的字段 v-m ...

  5. React++antd+ProComponents可编辑表格EditableProTable组件实现表单中的可编辑列表组件

    需求: 在新增&编辑表单中,共分三个表单模块,第二个模块设计为一个可编辑表格组件,其中可选下拉列表依赖外层第一个模块的某条数据值,提供新增.编辑.删除.按规定条件去重等功能,并在第三个模块中自 ...

  6. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  7. dwz的form表单中url的变量替换

    form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...

  8. 转:表单中Readonly和Disabled的区别(HTML中使用javascript解除禁止input输入框代)

    转:表单中Readonly和Disabled的区别 参考资料: disabled和readonly区别: 参考博文1地址:http://blog.csdn.net/symgdwyh/article/d ...

  9. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  10. [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

    在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...

随机推荐

  1. 2020-08-22:I/O多路复用中select/poll/epoll的区别?

    福哥答案2020-08-22: select,poll,epoll 都是 操作系统实现 IO 多路复用的机制. 我们知道,I/O 多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是 ...

  2. vue全家桶进阶之路2:JavaScript

    JavaScript(简称"JS")是当前最流行.应用最广泛的客户端脚本语言,用来在网页中添加一些动态效果与交互功能,在 Web 开发领域有着举足轻重的地位.JavaScript ...

  3. 创建对象create()、批量创建bulk_create()、创建或更新update_or_create()、更新对象update()、更新或创建update_or_create()、删除对象delete()使用filter过滤、判断是否存在exists()、统计个数count()、聚合aggregate()

    创建对象create().批量创建bulk_create().创建或更新update_or_create().更新对象update().更新或创建update_or_create().删除对象dele ...

  4. 数据分析缺失值处理(Missing Values)——删除法、填充法、插值法

    缺失值指数据集中某些变量的值有缺少的情况,缺失值也被称为NA(not available)值.在pandas里使用浮点值NaN(Not a Number)表示浮点数和非浮点数中的缺失值,用NaT表示时 ...

  5. 洛谷 P8742题解

    简单版(P2347)传送门 原题传送门 有一道类似的题目(P2347),先扯一扯~ 1.P2347 题目分析 动态规划入门题(01背包可行性问题)~ 我们设 \(dp_j\) 为能否用砝码称出 \(j ...

  6. jquery页面搜索关键词突出显示

    页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始,先把所有字体颜色恢 ...

  7. 手记系列之六 ----- 分享个人使用kafka经验

    前言 本篇文章主要介绍的关于本人从刚工作到现在使用kafka的经验,内容非常多,包含了kafka的常用命令,在生产环境中遇到的一些场景处理,kafka的一些web工具推荐等等.由于kafka这块的记录 ...

  8. 适合Windows桌面、Material Design设计风格、WPF美观控件库【强烈推荐】

    推荐一个在Github已start超过13.6K,非常流行.美观的WPF控件库. 项目简介 这是一个适用于Windows桌面,全面且易于使用的控件库,遵循Google推测的Material Desig ...

  9. 文本识别分类系统python,基于深度学习的CNN卷积神经网络算法

    一.介绍 文本分类系统,使用Python作为主要开发语言,通过TensorFlow搭建CNN卷积神经网络对十余种不同种类的文本数据集进行训练,最后得到一个h5格式的本地模型文件,然后采用Django开 ...

  10. 【python基础】文件-初识文件

    文本文件可存储的数据量是非常多的.每当需要分析或修改存储在文件中的信息时,首先就是读取文件到内存中,为此可以一次性读取文件的全部内容,也可以以每次一行的方式逐步读取. 1.读取文件 1.1读取整个文件 ...