在使用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. 文心一言 VS chatgpt (8)-- 算法导论2.3 5~6题

    五.回顾查找问题(参见练习 2.1-3),注意到,如果序列 A 已排好序,就可以将该序列的中点与v进行比较.根据比较的结果,原序列中有一半就可以不用再做进一步的考虑了.二分查找算法重复这个过程,每次都 ...

  2. 2021-03-22:小虎去买苹果,商店只提供两种类型的塑料袋,每种类型都有任意数量。1.能装下6个苹果的袋子,2.能装下8个苹果的袋子。小虎可以自由使用两种袋子来装苹果,但是小虎有强迫症,他要求自己使用的袋子数量必须最少,且使用的每个袋子必须装满。给定一个正整数N,返回至少使用多少袋子。如果N无法让使用的每个袋子必须装满,返回-1。

    2021-03-22:小虎去买苹果,商店只提供两种类型的塑料袋,每种类型都有任意数量.1.能装下6个苹果的袋子,2.能装下8个苹果的袋子.小虎可以自由使用两种袋子来装苹果,但是小虎有强迫症,他要求自己 ...

  3. 2021-03-11:go中,协程内部再启用协程,它们是没关系,对吧?外部协程奔溃,内部协程还会执行吗?外部协程执行结束的时候,如何让内部协程也停止运行?golang原生提供的包里,让内部协程停止运行,如何实现?

    2021-03-11:go中,协程内部再启用协程,它们是没关系,对吧?外部协程奔溃,内部协程还会执行吗?外部协程执行结束的时候,如何让内部协程也停止运行?golang原生提供的包里,让内部协程停止运行 ...

  4. 使用4G通信模块和MQTT协议,完成物联网设备开发。

    使用4G通信模块和MQTT协议,完成物联网设备开发. (1)安装并使用4G模块通信模块,建立microPython开发环境: (2)使用提供的Demo开发例程,使用MQTT传输协议连接阿里或腾讯网站, ...

  5. 新出的Alist云盘视频助手,真的香还是假的香?

    作为某云盘的重度使用者和长期受虐者,前段时间无意中看到一款新出的网盘工具,叫Alist云盘视频助手,不同于一般的网盘工具,它不是面向网盘数据下载的,它面向的是网盘视频文件隐私保护,大白话就是:加密网盘 ...

  6. 深入理解 python 虚拟机:破解核心魔法——反序列化 pyc 文件

    深入理解 python 虚拟机:破解核心魔法--反序列化 pyc 文件 在前面的文章当中我们详细的对于 pyc 文件的结构进行了分析,pyc 文件主要有下面的四个部分组成:魔术. Bite Filed ...

  7. 【重学C++】03 | 手撸C++智能指针实战教程

    文章首发 [重学C++]03 | 手撸C++智能指针实战教程 前言 大家好,今天是[重学C++]的第三讲,书接上回,第二讲<02 脱离指针陷阱:深入浅出 C++ 智能指针>介绍了C++智能 ...

  8. Metabase可视化BI系统部署安装及简单使用

    Metabase 是国外开源的一个可视化系统,语言使用了Clojure + TypeScript. Clojure(/ˈkloʊʒər/)是Lisp程式語言在Java平台上的現代.動態及函數式方言.来 ...

  9. VuePress2.0构建项目文档系统

    VuePress2.0构建项目文档系统 参考TerraMours 官网.https://terramours.site/ 文件结构参考: 1.修改首页README.md 修改项目下的README.md ...

  10. Simple Date Format类到底为啥不是线程安全的?

    摘要:我们就一起看下在高并发下Simple Date Format类为何会出现安全问题,以及如何解决Simple Date Format类的安全问题. 本文分享自华为云社区<[高并发]Simpl ...