ExtJS内联宽度导致firefox中的宽度错误

我们使用ExtJS 4.1.2创建一个工具栏停靠在顶部的面板。我们已经覆盖了很多样式来实现我们想要的外观和感觉。尽管我们尽最大努力调整和调整，但我们在Firefox中遇到了一个奇怪的问题，该面板出现的页面默认宽度为20000px。我相信有问题的元素是ExtJS用一类“x-box-inner”创建的内部组件。在DOM浏览器视图中，我可以看到ExtJS内联宽度导致firefox中的宽度错误

<div id="mylist" class="x-panel listpanel x-panel-default">  
<div id="toolBar###(ExtJSid)" class="x-toolbar-docked-top x-toolbarhttp://i.stack.imgur.com/ddvdF.png x-toolbar-default x-docked x-docked-top ..." style="width: 735px;..." ...> 
    <div id="anotherXtJSid" class="x-box-inner " style="width: 735px; ..." ...> 
    <div id="anotherExtJSid" style="width:20000;..." (no class)> 
...

如果我将鼠标悬停在该元素上，我看到如果在浏览器的DOM探险者1号修改为“自动”，则Firefox窗口滚动条消失的是20000px宽度，并且显示器尺寸合适。

我试图使用重写宽度解决这个问题为“宽度：自动”的div在该水平以下，在SCSS定义面板：

... 
.listpanel { 
    overflow: visible; 
    background: none; 
    border: none; 

    ... 
    .x-toolbar-docked-top { 
    overflow: visible; 

    .x-box-inner + div { // added + div 
     overflow: visible; 
     width: auto; // added width here. 
    } 
    } 
... 
}

该类创建时所使用的ExtJS的面板：

Ext.define('List', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.mylist', 
    ... // no width defined. It messes up all components within panel. 
    height: 750, 
    frame: false, 
    cls: 'listpanel', 
    bubbleEvents: [ 
    ... 
    ], 

... 

    initComponent: function() { 
     this.callParent(arguments); 
     this.add({ 
      xtype: 'listbody', 
      ownerCt: this, 
     ... 
    }, 
...

的width:auto和+ div上x-box-inner出现以固定宽度，虽然我仍然可以看到ExtJS的元件与width:20000px在DOM检查。但是，看起来任意，这打破了overfow: visible--当用户单击下拉按钮时，面板的一个下拉弹出框消失在面板下面。

是否有一些（其他）的方式来强制这个神秘的ExtJS元素的宽度？

来源

2016-04-15 GLaDOS

通常这是与所选布局的问题，但没有任何代码，没有什么做为了我们。 – Alexander

增加了一些源代码; scss和panel的创建还有很多，但我相信这些是影响超宽div的唯一部分。 – GLaDOS

因此，随着进一步的实验，并从我的同事提出了一些建议答案躺在

使用width: 100%代替width: auto
使用的>代替+影响的宽度
所有的孩子制作另一个规则对于x-box-inner没有> div只是为了控制overflow: visible。
制定规则!important，以便它们不会被其他样式覆盖。

样式表保持不变，但有以下x-box-inner规则的改变： ...

 .x-box-inner > div { 
     width: 100% !important; 
    } 

    x.box-inner { 
     overflow: visible !important; 
    } 
...

来源

2016-04-15 23:35:21 GLaDOS

ExtJS内联宽度导致firefox中的宽度错误

回答

相关问题