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

Question

我们正在使用 ExtJS 4.1.2 创建一个面板，其中的工具栏停靠在顶部。我们已经覆盖了很多样式来实现我们想要的外观和感觉。尽管我们尽最大努力进行对齐和调整，但我们在 Firefox 中遇到了一个奇怪的问题，即显示此面板的页面的默认宽度为 20000 像素。我相信有问题的元素是 ExtJS 使用 "x-box-inner" 中的单个 class 创建的一些内部组件。在 dom 浏览器视图中我可以看到

<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 资源管理器中我将 20000px 宽度编辑为 "auto" 然后 firefox window 滚动条消失，并且显示是正确的大小。

我试图在定义面板的 scss 中为该级别及以下级别的 div 解决覆盖宽度为 "width:auto" 的问题：

...
.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.
    }
  }
...
}

这个class在创建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,
        ...
     },
...

x-box-inner 上的 width:auto 和 + div 似乎固定了宽度，尽管我仍然可以在 DOM 中看到带有 width:20000px 的 ExtJS 元素检查员。但是，这似乎是任意的，这打破了 overfow: visible -- 当用户单击下拉按钮时，面板的工具栏下拉弹出窗口之一现在消失在面板下方。

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

Answer 1

因此，通过进一步的实验和我同事的一些建议，答案就在

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

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

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

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

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

ExtJS inline width causing a width bug in firefox

javascript

css

firefox

extjs

extjs4.1