ExtJS inline width causing a width bug in firefox

Question

We are using ExtJS 4.1.2 to create a panel with a toolbar docked on the top. We have overridden much of the styling to achieve the look and feel we wanted. Despite our best efforts to align and tweak, we are experiencing a strange issue in Firefox where the page on which this panel appears gets a default width of 20000px. I believe the element at fault is some internal component that ExtJS creates with a single class of "x-box-inner". In the dom browser view I can see

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

If I hover over the element, I see If, in the browser DOM explorer I edit that 20000px width to "auto" then the firefox window scrollbar disappears, and the display is the right size.

I attempted to fix the problem with an overridden width to "width:auto" for divs at that level and below, in the scss that defines the panel:

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

This class is used when creating the ExtJS panel:

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

The width:auto and + div on x-box-inner appears to fix the width, although I can still see the ExtJS element with width:20000pxin the DOM inspector. BUT, seemingly arbitrarily, this breaks the overfow: visible -- one of the panel's toolbar dropdown-popups now disappears beneath the panel when the user clicks the dropdown button.

Is there some (other) way to force the width of this mystery ExtJS element?

Usually this is an issue with the selected layout, but without any code, there's nothing to do for us. — Alexander
Added some source code; there's a lot more to the scss and panel creation, but I believe these are the only parts that effect the extra-wide div. — GLaDOS

GLaDOS GLaDOS · Accepted Answer · 2016-04-15T23:35:21

So, with further experimentation and some suggestions from my colleague the answer lay in

Using width: 100% instead of width: auto
Using > instead of + to affect all children for width
Making another rule for x-box-inner without the > div just for controlling the overflow: visible.
Making the rules !important so they aren't overridden by other styles.

The style sheet stayed the same, but with the following x-box-inner rule changes: ...

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

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

ExtJS inline width causing a width bug in firefox

1 Answers