在使用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. 2022-09-23:整数数组 stations 表示 水平数轴 上各个加油站的位置。给你一个整数 k 。 请你在数轴上增设 k 个加油站, 新增加油站可以位于 水平数轴 上的任意位置,而不必放在整数

    2022-09-23:整数数组 stations 表示 水平数轴 上各个加油站的位置.给你一个整数 k . 请你在数轴上增设 k 个加油站, 新增加油站可以位于 水平数轴 上的任意位置,而不必放在整数 ...

  2. 常用设计模式之.Net示例代码合集

    每一次初学者粉丝朋友,在后台向我咨询编程问题,我除了给他们指导学习路线,我都会建议他们学完基础知识后,一定要要注重编程规范,学习设计模式,修炼内功. 虽然说很多程序员,他们日常主要工作是CRUD,但是 ...

  3. 园子的商业化努力-AI人才服务:招募AI导师

    各位园子的小伙伴: 感谢大家对园子的支持,园子差不多接近20年的历程,一直是最低配模式生存和发展,感谢大家对于前段时间的困局给予了商业化的各种建议!在大家的鼓励与支持之下,园子的商业化努力正在以更快的 ...

  4. phpstudy-pikachu-数字型注入(post)

    抓包搞到格式 id=1&submit=%E6%9F%A5%E8%AF%A2 查字符段 id=1 order by 2&submit=%E6%9F%A5%E8%AF%A2 id=1 un ...

  5. vernemq 一个可用的入门指南之一:Mac下的安装及使用,使用MQTTX访问verneMQ

    因为百度到一篇简书的,不可用,所以写这么一篇,方便后来人 物联网的消息队列技术选型,很多地方会推荐使用VerneMQ,这里做一个安装实验记录,并非推荐. git clone https://githu ...

  6. 云服务器挂载easyconnect

    参考:easyconnect命令版地址 https://github.com/Hagb/docker-easyconnect 前提条件: 云服务器(以阿里云服务器 Centos7.6 为例) 用途: ...

  7. Spectre.Console-处理依赖注入

    引言 之前说的做自动记录 Todo 执行过程中消耗的时间的Todo 项目,由于想持续保持程序执行,就放弃了 Spectre.Console.Cli,后来随着命令越来越多,自己处理觉得很是麻烦,想了想要 ...

  8. Java(数组声明创建、初始化、特点、内存分析、边界)

    数组的定义 数组是相同类型数据的有序集合 数组描述的是相同类型的若干数据,按照一定先后次序排序组合而成 其中,每一个数据称作一个数组元素,每个数组元素可以通过下标访问它们 1.数组声明和创建 声明 d ...

  9. 第三章 Linux文件与目录结构

    1. Linux 文件 ‍ Linux 系统中一切皆文件. ‍ 2. Linux 目录文件(了解一下) ‍ ​​ ‍ ​​ ‍ ​​ ‍ ​​ ‍ ​​ ‍ ​​ ‍

  10. Python运维开发之路《函数进阶》

    面向对象类的进阶 抽象类 python 没有抽象类.接口的概念,所以要实现这种功能需要导入abc模块 py2:导入abc函数,_metaclass__ = abc.ABCMeta;在强制调用类下:@a ...