Question

我们正在使用ExtJS 4.1.2来创建一个工具栏，其中工具栏停靠在顶部。我们已经覆盖了大部分样式，以实现我们想要的外观和感觉。尽管我们尽最大努力进行对齐和调整，但我们在Firefox中遇到了一个奇怪的问题，其中出现此面板的页面的默认宽度为20000px。我相信故障元素是ExtJS用单个“x-box-inner”类创建的内部组件。在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窗口滚动条消失，显示尺寸正确。

我尝试使用重写宽度将问题解决为“width：auto”，对于该级别及以下的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似乎可以修复宽度，但我仍然可以在DOM检查器中看到带有width:20000px的ExtJS元素。但是，看似随意，这打破了overfow: visible - 当用户点击下拉按钮时，面板下方的一个工具栏下拉菜单弹出窗口现在消失在面板下方。

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

Answer 1

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

使用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;
     }
...

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

1 个答案: