ExtJS Inline-Breite, die einen Breitenfehler in Firefox verursacht

Question

Wir verwenden ExtJS 4.1.2, um ein Panel mit einer angedockten Symbolleiste zu erstellen. Wir haben einen Großteil des Stylings außer Kraft gesetzt, um das gewünschte Look and Feel zu erreichen. Trotz der Bemühungen, die wir uns vorgenommen haben, haben wir ein merkwürdiges Problem in Firefox, bei dem die Seite, auf der das Panel erscheint, eine Standardbreite von 20000 Pixeln hat. Ich glaube, dass das Element, das fehlerhaft ist, eine interne Komponente ist, die ExtJS mit einer einzelnen Klasse von "x-box-inner" erstellt. Nach Ansicht dom Browser kann ich sehen,

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

Wenn ich über das Element schweben, ich sehen Wenn im Browser DOM-Explorer ich diese 20000px Breite bearbeiten auf „auto“, dann im Firefox-Fenster Scrollbar verschwindet, und das Display hat die richtige Größe.

ich versuchte, das Problem mit einer überschriebenen Breite festsetzt „width: auto“ für divs auf diese Ebene und darunter, in dem SCSS, die das Panel definiert:

Diese Klasse

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

verwendet, wenn die Schaffung ExtJS Platte:

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

die width:auto und + div auf x-box-inner erscheint die Breite zu fixieren, obwohl ich immer noch das ExtJS Element mit width:20000px im DOM-Inspektoren sehen. ABER, scheinbar willkürlich, bricht dies die overfow: visible - eines der Dropdown-Popups der Panel-Symbolleiste verschwindet jetzt unter dem Panel, wenn der Benutzer auf die Dropdown-Schaltfläche klickt.

Gibt es eine (andere) Möglichkeit, die Breite dieses mysteriösen ExtJS-Elements zu erzwingen?

Answer 1

also mit weiteren Experimenten und einige Vorschläge von meinem Kollegen lag die Antwort in

1. Mit width: 100% statt width: auto
2. Mit > statt +, um alle Kinder betreffen für Breite
3. eine weitere Regel zu machen für x-box-inner ohne die > div nur für die Steuerung der overflow: visible.
4. Erstellen der Regeln !important, damit sie nicht von anderen Stilen überschrieben werden.

Das Stylesheet gleich geblieben, aber mit den folgenden x-box-inner Regeländerungen: ...

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

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