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中的代码能够正常运行,其它全部罢 ...
随机推荐
- 2022-04-28:有 n 个城市通过一些航班连接。给你一个数组 flights ,其中 flights[i] = [fromi, toi, pricei] ,表示该航班都从城市 fromi 开始,
2022-04-28:有 n 个城市通过一些航班连接.给你一个数组 flights ,其中 flights[i] = [fromi, toi, pricei] ,表示该航班都从城市 fromi 开始, ...
- .join()字符串操作函数
join函数是一个字符串操作函数 str.join(item)str表示字符串(字符),item表示一个成员,注意括号里必须只能有一个成员,比如','.join('a','b')这种写法是行不通的 举 ...
- Spring Cloud开发实践(六): 基于Consul和Spring Cloud 2021.0的演示项目
目录 Spring Cloud开发实践(一): 简介和根模块 Spring Cloud开发实践(二): Eureka服务和接口定义 Spring Cloud开发实践(三): 接口实现和下游调用 Spr ...
- vue3+vite2+element-plus+ts搭建一个项目
花了几天用 vue3+ vite2+ element-plus+ ts 搭了个 极简版骨架型数据管理系统,使用静态数据模拟动态路由,路由拦截,登录页面鉴权等,使用了iconify字体图标,整合了ces ...
- rest --framework 源码学习第一天 view 类
首先view类:源码分析
- Kubernetes(k8s)一次性任务:Job
目录 一.系统环境 二.前言 三.Kubernetes Job简介 四.创建一次性任务job 4.1 创建一个简单任务的job 4.2 创建需要执行多次的job任务 五.测试job失败重试次数 六.j ...
- IntelliJ IDEA 的安装
IntelliJ IDEA 的安装 安装之前参考Win10环境配置(二) --Java篇 1. 下载软件 官网: IntelliJ IDEA 分两个版本,学习Java下Community版 2.安装 ...
- ASP.NET Core 6框架揭秘实例演示[37]:重定向的N种实现方式
在HTTP的语义中,重定向一般指的是服务端通过返回一个状态码为3XX的响应促使客户端像另一个地址再次发起请求,本章将此称为"客户端重定向".既然有客户端重定向,自然就有服务端重定向 ...
- RabbitMQ快速使用代码手册
本篇博客的内容为RabbitMQ在开发过程中的快速上手使用,侧重于代码部分,几乎没有相关概念的介绍,相关概念请参考以下csdn博客,两篇都是我找的精华帖,供大家学习.本篇博客也持续更新~~~ 内容代码 ...
- 解决Mysql 5.7 不能插入中文的问题
问题的解决方案 问题描述 : 在学习DML插入中文数据时 , 发现出现了以下问题 -- 插入数据 insert into tea (id , name) values (2 , '徐凤年'); -- ...