在使用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. 2023-03-16:给定一个由 0 和 1 组成的数组 arr ,将数组分成 3 个非空的部分, 使得所有这些部分表示相同的二进制值。 如果可以做到,请返回任何 [i, j],其中 i+1 < j

    2023-03-16:给定一个由 0 和 1 组成的数组 arr ,将数组分成 3 个非空的部分, 使得所有这些部分表示相同的二进制值. 如果可以做到,请返回任何 [i, j],其中 i+1 < ...

  2. 2022-10-15:给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素。 你可以按 任意顺序 返回答案。 要求时间复杂度O(N)。 输入: nums = [1,1,1

    2022-10-15:给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素. 你可以按 任意顺序 返回答案. 要求时间复杂度O(N). 输入: nums = [1,1,1 ...

  3. 2022-06-24:golang选择题,以下golang代码输出什么?A:1;B:3;C:4;D:编译失败。 package main import ( “fmt“ ) func mai

    2022-06-24:golang选择题,以下golang代码输出什么?A:1:B:3:C:4:D:编译失败. package main import ( "fmt" ) func ...

  4. uni-app 创建项目及目录结构

    文件-新建-1.项目 ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud) │─components 符合vue组件规范的 ...

  5. svn is already locked 最终解决方案

    今日执行项目更新时,手贱点击了cancel 中断了操作,最后导致项目被锁,杯具了. 首先想到了Clean up 直接提示 看来不行呀 -// 省略 n 多种尝试 最后使用删除db 中的 lock 表来 ...

  6. JS逆向实战14——猿人学第二题动态cookie

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 https:// ...

  7. Abstract Factory Pattern 抽象工厂模式简介与 C# 示例【创建型】【设计模式来了】

    〇.简介 1.什么是抽象工厂模式? 一句话解释:   通过对抽象类和抽象工厂的一组实现,独立出一系列新的操作,客户端无需了解其逻辑直接访问. 抽象工厂模式(Abstract Factory Patte ...

  8. 理解ASP.NET Core - 全球化&本地化&多语言(Globalization and Localization)

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 概述 在众多知名品牌的网站中,比如微软官网.YouTube等,我们经常可以见到"切换 ...

  9. windows服务启动时提示找不到指定路径的问题

    我是自己写了一个windows服务,并且在之前一直运行良好,上周四晚上之后,竟然莫名其妙的停止了,我登上远程服务器,才发现,该服务已经停止,当我手动打开该服务时,提示我如下错误,找不到指定路径:. 一 ...

  10. Elastaticsearch 集群部署

    系统Ubuntu 16.04 Elastaticsearch 5.6.9 Kibana 5.6.9 官网地址 https://www.elastic.co/products/elasticsearch ...