EXTJS2.2中输入框边框显示不完整解决思路,一级解决办法。

简介: 同事在使用ExtJs时发现如下Bug:表单当中的元素,出现文本框参差不齐,有的没有边框等,不美观;输入框显示不完整,抓狂。分析步骤及解决思路如下:   1.使用IE的F12功能,获取生成的输入框HTML脚本,关键点脚本如下。<pre><br><DIV style="PADDING-LEFT: 15px;background:blue" class=x-form

同事在使用ExtJs时发现如下Bug:表单当中的元素,出现文本框参差不齐,有的没有边框等,不美观;输入框显示不完整,抓狂。


分析步骤及解决思路如下:

   1.使用IE的F12功能,获取生成的输入框HTML脚本,关键点脚本如下。
<pre>
<br>
<DIV style="PADDING-LEFT: 15px;background:blue" class=x-form-element>
<INPUT class="x-form-text">
</DIV>
</pre>
    发现此输入框会被上层的div遮挡住部分。
   2.将此HTML脚本,放到EXT2.2、2.3、3.4版本中使用各版本不同的样式表进行测试,是否有修正
   3.观察到3.4版本已经修正。
   4.比对2.2和3.4版本的关于form.css的差异,并合并对于x-form-text的描述。
关键点样式:
<pre>
.ext-ie .x-form-text {
   /*
    margin:-1px 0px;  ie bogus margin bug
    该代码将部分影响到页面中输入框显示不完整
    */
    margin:0px 0px;
    height:22px; /* ie quirks */
    line-height:18px;
}
</pre>

    经过修改后,在Windows2003+Ie8环境下一级Win7+Ie9环境下样式显示正常。
相关文章
|
8月前
|
前端开发
css改input变输入框光标颜色demo效果示例(整理)
css改input变输入框光标颜色demo效果示例(整理)
|
9月前
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
66 0
鼠标放上边框变虚转圈效果demo效果示例(整理)
鼠标放上边框变虚转圈效果demo效果示例(整理)
|
容器
使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果
使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果
147 0
Axure RP 9查找属性栏位置简单步骤(以文本框举例)
Axure RP 9查找属性栏位置简单步骤(以文本框举例)
1665 0
Axure RP 9查找属性栏位置简单步骤(以文本框举例)
|
JavaScript
Vue组件中表格文字内容太长,自动变省略号,鼠标悬浮上去显示全称。
Vue组件中表格文字内容太长,自动变省略号,鼠标悬浮上去显示全称。
562 0