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中的寬度錯誤

回答

相關問題