el-date-picker 在表单中宽度(width)问题
在使用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)问题的更多相关文章
- 在jsp中用EL 表达来获取表单中的参数
在一个JSP页面转到另一个JSP页面时,对表单中的参数用EL表达式提取为: <form action="sampleJsp.jsp" method="po ...
- javascript date picker
一个简洁的date picker <html><head><meta http-equiv="Content-Type" content=" ...
- Js 向表单中添加多个元素
@{ ViewBag.title = "地图导航"; } @model YT.XWAJ.Public.Application.MapNavigation.Dto.MapNaviga ...
- 在vue中的form表单中下拉框中的数据来自数据库查询到的数据
文章目录 1.实现的效果: 2.前端html代码 3.js中的代码 4.后端的方法 1.实现的效果: 增加一个新的类型到数据库 2.前端html代码 需要注意的部分:prop后边是表单中的字段 v-m ...
- React++antd+ProComponents可编辑表格EditableProTable组件实现表单中的可编辑列表组件
需求: 在新增&编辑表单中,共分三个表单模块,第二个模块设计为一个可编辑表格组件,其中可选下拉列表依赖外层第一个模块的某条数据值,提供新增.编辑.删除.按规定条件去重等功能,并在第三个模块中自 ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- dwz的form表单中url的变量替换
form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...
- 转:表单中Readonly和Disabled的区别(HTML中使用javascript解除禁止input输入框代)
转:表单中Readonly和Disabled的区别 参考资料: disabled和readonly区别: 参考博文1地址:http://blog.csdn.net/symgdwyh/article/d ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
- [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...
随机推荐
- 2021-05-28:跳跃游戏 II。给定一个非负整数数组,你最初位于数组的第一个位置。数组中的每个元素代表你在该位置可
2021-05-28:跳跃游戏 II.给定一个非负整数数组,你最初位于数组的第一个位置.数组中的每个元素代表你在该位置可以跳跃的最大长度.你的目标是使用最少的跳跃次数到达数组的最后一个位置.假设你总是 ...
- 2021-10-20:分数到小数。给定两个整数,分别表示分数的分子numerator和分母denominator,以字符串形式返回小数。如果小数部分为循环小数,则将循环的部分括在括号内。输入: num
2021-10-20:分数到小数.给定两个整数,分别表示分数的分子numerator和分母denominator,以字符串形式返回小数.如果小数部分为循环小数,则将循环的部分括在括号内.输入: num ...
- Jupyter Notebook (Anaconda3)更改保存文件的默认路径
打开jupyter 查找路径 1 import os 2 a=os.path.abspath('.') 3 print(a) 创建个人文件夹 E:\pyAPP\JupyterWork 查找修改配置文件 ...
- odoo开发教程五:高级视图
树视图 tree视图表现出来是列表视图,列表中一行一纪录.可以根据每行纪录的某字段值不同而把每行以不同样式显示. decoration-{样式}="条件" 样式主要有: bf(fo ...
- 新版idea快捷键总结学习----(用于java开发模式)
选择代码区 ctrl w 如果放到以if开头的语句,可以选择if判断条件所在的代码片段 游标在单个单词下时 选择单词 在选中多个单词时,选择整个字符串 三次点击时,如果不在字符串单词下,用于选择{}内 ...
- Java关键字break、continue 、return的区别,嵌套循环,数组的概念以及数组案例
一.关键字 break.continue .return的区别 1.break : 用于在switch..case中放置语句块穿透, 用于跳出循环 // 从1-100 遇到7的倍数 break f ...
- 你还在用Object.equals()方法吗?
前言 当<阿里巴巴Java开发手册>发布后,我也是仔细进行了阅读,想从中找出一些"标准",让自己的代码质量提高.手册中对 Object 的 equals 方法的使用进行 ...
- JavaScript如何解决单线程缺陷——webWorker
解决JavaScript单线程问题--webWorkers 参考文档 使用 Web Workers - Web API 接口参考 | MDN (mozilla.org) MDN的介绍为: Web Wo ...
- [Qt开发]一口气搞懂串口通信
好多小鳄鱼 一.关于串口通信: Qt的确有自己的串口通信类,就是QSerialPort,但是我们在使用过程中因为要更加定制化的使用串口通信类减小开发的难度,所以我们会提供一个串口通信类,也就是这个Se ...
- [ARM 汇编]进阶篇—存储访问指令—2.3.3 栈操作指令
栈是一种特殊的数据结构,其特点是后进先出(LIFO,Last In First Out).在 ARM 汇编中,栈通常用于保存函数调用时的寄存器状态.局部变量和返回地址等.本节将详细介绍 ARM 汇编中 ...