element-ui中点击input框和下拉框会出现跳动的现象

bug描述
项目中当下拉框和输入框还有日期组件在一行的时候,对其进行操作的时候,下拉框,输入框和日期框会出现抖动的现象
分析原因
刚开始的时候,以为是高度没有统一,于是统一设置el-input_inner的高度

    .el-input--medium .el-input__inner {
      height: vw(40);
      line-height: vw(40);
      font-size: vw(14);
    }

发现所有的高度都没有问题之后,于是分析代码。我这边直接用的是element-ui的el-row和el-col的布局,于是想是不是这个
的影响,我的el-row和el-col都有设置margin:0!important;padding:0 !important;实在分析不出原因就将其布局改写为
flex布局,发现依然出现这个bug,于是,在想是不是由于计算属性导致的calc(),确定将这块隔离在calc之外,发现还是出现
这个bug。于是继续修修修,脑中偶然一现曾经浏览到的一个网页上面的一个关于下拉框的属性el-select--medium。
抱着试试的态度在代码中加入了

  .el-select--medium{
      vertical-align: bottom !important;
    }

ok,代码修复了

原文地址:https://www.cnblogs.com/smart-girl/p/12211034.html

时间: 2024-11-06 13:35:36

element-ui中点击input框和下拉框会出现跳动的现象的相关文章

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

Jquery学习笔记:操作form表单元素之一(文本框和下拉框)

一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步,需要获取到表单元素对应的jquery(或dom)对象.这个主要是利用jquery的选择器机制. 第二步,调用表单元素的属性和方法来获取和设置值. 其中最常见的就是利用jquery对象的val方法.因为很多表单元素都有标准的 value属性,这个可以通过jquery的 val方法来读取和设置属性值.

带复选框的下拉框

效果图: . css: <style type="text/css"> /* 带复选框的下拉框 */ ul li{ list-style: none; padding:0px; margin: 0px; } .select_checkBox{ border:0px solid red; position: relative; display:inline-block; } .chartQuota{ height:23px; float:left; display:inlin

Easyui-combobox-checkbox-带复选框的下拉框

$.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){                        if (result.length == 0){                            $("#sub-insurance").addClass("none");                        } else {       

通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

<!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-

vue 下拉框自定义 以及点击空白空白处关闭下拉框

html: <div class="divInput" v-close> <div class="input" @click="opensort"> <input v-model="sortvalue" type="text" placeholder="分类" /> <vicon :type="'triangle'" clas

用div,ul,input模拟select下拉框

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>案例测试</title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <script type="text/javascript" src=&

Selenium—选择框的相关操作(单选框、多选框、复选框、下拉框)

编辑框 无缺省值:第二个输入框 可直接对输入框进行编辑: driver.find_element_by_id('input2').send_keys('selenium') 有缺省值:第一个输入框,默认 test 此时,如果我们直接对第一个输入框进行编辑,会发现与预期结果不符 driver.find_element_by_id('input1').send_keys('selenium') 因此,如果需要对存在默认值的输入框进行编辑,则需先进行清楚操作,然后再进行编辑 driver.find_e

JS-日期框、下拉框、全选复选框

<!-- 下拉框 --><link rel="stylesheet" href="static/ace/css/chosen.css" /> <!-- 日期框 --><link rel="stylesheet" href="static/ace/css/datepicker.css" /> <!-- 日期框 --> <script src="stati