element form inline属性bug

已于 2022-11-21 09:48:42 修改
阅读量4.2k 收藏 3
点赞数 1
分类专栏： element 文章标签： bug css 前端
于 2021-06-30 14:39:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41595733/article/details/118360337
版权

element form inline属性bug

element-ui 中 form 中 设置 inline 属性为 true 后会出现因设备分辨率改变，form 换行的bug

原因分析

图例

示例图

element demo
input style
input style

总结

出现 form 换行原因是由于：
inline 属性给 form 设置了width：auto的样式，
这会导致form按百分比缩放
同时 form中 input 组件样式中存在 width：100%的设定
这使得 input width  会自动与外层的div width 保持一致

处理方案

  • 修改样式将 form item 的 width:auto样式 改为需要的样式
  • 使用组件库提供的api
    element-ui-form-item
auserroot
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element的form表单中如何一行显示多el-form-item标签
weixin_30566063的博客
07-06 6212
效果图: HTML代码： <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element[email protected]/lib/index.js"></script> <div id="app">...
element form 校验数组每一项实例代码
10-16
主要介绍了element form 校验数组每一项的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
el-form中inline的作用
utoui的博客
03-03 1万+
将表单元素放在一列上 效果： 加了 inline之后
inline-lit-element-loader：用于内联LitElement外部样式和装饰器的Webpack加载器
02-06
内联照明元件装载机 Webpack加载器可内联LitElement外部样式和装饰器 入门 git clone https://github.com/aelbore/inline-lit-element-loader.git npm install 安装 npm install --save-dev inline-lit-element-loader 建立 hello-world.css h1 { color : red; } hello-world.js import { LitElement , html } from 'lit-element' import './hello
vue+element创建动态的form表单及动态生成表格的行和列
10-16
主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
elementUI使用的正确姿势（一）表单
marendu的博客
05-10 5939
elementUI使用表单的正确姿势 当我们使用elementui时，大部分人，遇到问题就想着，用css覆盖原本的样式，导致出现很多问题，一般来说，使用ui库，基本是不写css的，下面就是一下小技巧! 1.实现表单搜索栏响应换行 定义搜索栏时，利用form表单的inline属性，可以让表单内部变成行内元素自动为一行，同时，缩小屏幕宽度的时候会自动换行 <template> <div class="main"> <el-form :inline='true' :mo
el-form的二次封装，el-form嵌套使用
qq_32849999的博客
08-26 2233
背景：公司项目的每一个页面基本上都有el-form。而且不同的el-form里面有部分el-form-item是相同的，于是就想把这部分相同的el-form-item封装成一个el-form即组件d2-page-form。为什么要封装成一个el-form？d2-page-form是页面原来的el-form的子组件。在封装组件A的过程中，又想到了把el-form二次封装，这样就可以满足页面中不再写el-form、el-form-item的html代码了，直接封装一个组件，给组件传入对应的属性就可以了。....
el-form中el-input输入框的宽度问题
weixin_47169270的博客
09-13 2万+
问题：要解决lable和input水平排列且input宽度可以自定义 1、el-form有个属性inline默认为false，故而input输入框占了整行 <el-form :model="addDialogForm" :rules="addDialogRules" > <el-form-item prop="attr_name" :label="addTitle"> <el-input v-model="addDialogForm.attr_name"
el-form的入门学习
qq_40765784的博客
06-07 1万+
el-form入门学习
element ui 中el-form 改成多列
忙碌的菠萝
11-24 2874
el-form 改成多列 最后效果
JQuery 学习笔记 element属性控制
12-09
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> [removed][removed] <script
详解element-ui中form验证杂记
10-17
主要介绍了详解element-ui中form验证杂记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Element el-form 表单详解
热门推荐
程序员大阳
10-15 4万+
本文目录1. 前言2. 基本用法3. 行内表单4. 标签对齐方式5. 调整尺寸6. 小结 1. 前言 表单是使用频率非常高的组件了，HTML默认提供的表单是没啥样式的，而Element对表单提供了封装形成了el-form组件，使整个表单的样式整齐划一。 本篇就来介绍下表单的使用，主要介绍的是样式方面的使用。 2. 基本用法 代码： 基本用法： <el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padd
HTML中哪些元素是inline？哪些是inline-block？哪些是block的? 有哪些区别？
精品小程序实战教程
02-12 1999
历史小故事 ：这三个元素到底是怎么产生的？ 在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，整理分类并集纳成册。我们可以把剪下来的纸块看成是block元素，而用笔记录的文字、图画，看成是line元素。最早在做浏览器的时候加入这两个元素，是遵循了同样的模式。 在2002年8月2日发布的css2.1版添加了display的inline-block值。为更好的进行...
Bootstrap笔记
OSSRS
02-15 881
链接 默认div布局就是不断的堆叠。默认布局主要是上面的间隙太少，可以加增加间隙。 标签和Badges可以用在显示状态，参考：这里 警告框样式，可以用来显示错误消息提示。参考：这里 进度条样式，显示进度，可以参考：这里 导航条样式，一般的导航和菜单栏，可以参考：这里 分页样式，可以参考：这里 导航和TAB分栏，可以参考：这里 下拉按钮组，可以参考：这里 按钮组，可以参考：这里 下拉菜单组，可以参考：这里 折叠组，可以参考：这里 信息展示方式，可以用dl/dt/dd也就是水平描述的方式。列表可以用ul/ol/
el-form表单组件笔记（持续更新）
qq_39501775的博客
09-26 312
el-form的model是一个大属性，属于一个集合，里面包含可被el-from-item使用的小属性【v-model】，在form进行提交的时候统一提交。会被传入el-form-item该值，可以为auto，如果el-form-item也设置了该值，就优先使用el-form-item的labelWidth。其次，在el-form-item里面会通过getRules方法获得，其将自身的rules和el-form的rules合并，此时【是时间选择组件，可以选择时间点、日期点，也可以选择时间范围、日期范围。
element form表单的必填和重置事件不生效的问题
Soft_fairy的博客
06-27 843
element表单在使用的时候可以配置验证规则 必填选项和事件重置 但是很多人都会忽略form表单使用的时候的细节用法 从而导致某些功能实现不了 其实就是表单项要有一个prop属性 例如 <el-form :inline="true" ref="resetForm" :model="student" class="demo-form-inline"> <el-form-item label="名称"> <el-input v-model
element列表只允许展开一项
weixin_42569808的博客
04-18 1212
1.这里使用element中的列子 <el-table :data="tableData" style="width: 100%" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandSelect"> <el-table-column type="expand"> <tem...
【bugfix】error in chunk.js from uglifyjs
最新发布
daddykei的博客
04-24 566
检查是否是因为新安装的包不支持es5，通过babel 或者 fork 打包输出 es5以兼容老项目。
element ui 行内表单项inline属性
07-28
Element UI 是一个基于 Vue.js 的桌面端组件库，可以帮助开发人员快速构建用户界面。在 Element UI 中，可以使用行内表单项的 `inline` 属性来实现将表单项水平排列的效果。 要使用 `inline` 属性，需要在 `el-form-item` 组件上添加该属性，并将其值设置为 `true`。例如： ```html <el-form :inline="true"> <el-form-item label="姓名"> <el-input></el-input> </el-form-item> <el-form-item label="年龄"> <el-input></el-input> </el-form-item> <el-form-item> <el-button type="primary">提交</el-button> </el-form-item> </el-form> ``` 在上面的示例中，`el-form` 组件的 `inline` 属性被设置为 `true`，这样所有的 `el-form-item` 组件都会水平排列。每个表单项都包含一个标签和一个输入框。 希望这个回答能够帮助到你！如有更多问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值