extjs - 列標題和行數據不對齊

我有一個gridpanel和5列。問題是列標題和行數據未對齊。我相信它只是在我的項目中的問題，因爲當我用相同的代碼創建一個例子，然後一切正常。請檢查下面的圖片：extjs - 列標題和行數據不對齊

任何人都可以提出可能是什麼問題呢？

來源

2011-03-14 user427969

在圖像中藍色懸停狀態顯示在頁眉一些填充，你是否加載任何自定義CSS旁邊的標準ext-all.css？ – ChrisR 2011-03-14 23:15:22

我猜你的網格受其他CSS。 – YNhat 2011-03-15 04:33:36

您好，非常感謝.....這是唯一的問題。非常感謝。問候 – user427969 2011-03-15 05:29:27

請按照要求在css下面申請。

1）用於定製特定的ExtJS的GridPanel，應用下面的CSS：

#testgrid_id table caption,table th,table td {  
padding : 0px !important; 
margin : 0px !important; 
}

注意：在此，上述的「#testgrid_id」是特定網格面板的id。

2）適用於所有的ExtJS GridPanels，適用下面的CSS：

table caption,table th,table td {  
padding : 0px !important; 
margin : 0px !important; 
}

謝謝！

來源

2012-12-06 12:59:44 kiran

我也面臨着同樣的問題http://stackoverflow.com/q/23146502/1903120。請爲我提出一個解決方案。 – user1903120 2014-04-18 04:25:32

我有這個錯誤使用GXT 2.2.5（Chrome版本26.0.1410.43m）。

解決方案：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .x-grid3-row td.x-grid3-cell 
    { 
     box-sizing: border-box; 
    } 
}

請注意，如果你的CSS中包含類似：遠程

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

它。

來源

2013-04-11 07:33:36 skyrosbit

我也面臨着同樣的問題http://stackoverflow.com/q/23146502/1903120。請爲我提出一個解決方案。 – user1903120 2014-04-18 03:59:13

其實我發現大多數時候，電網是在一些面板下。因此，實際的問題是與此類

.x-grid-cell-inner 
    { 
     overflow: hidden; 
     padding: 2px 6px 3px; 
     **text-overflow: ellipsis; 
     white-space:nowrap;** 

    }

這是因爲或

<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td>

寬度不被設置。使分區溢出列並擰緊整個網格對齊。

可能是因爲我嵌套GridPanel到另一個面板或行擴展器在我的情況下或某些模式對話或任何可能導致設置不會發生。

快速修復。

**white-space:normal;**

會做的伎倆，擠壓內容到列中。然而，它不適用橢圓，所以如果內容很長，它會有點煩人，它不會隱藏着「...」

我會嘗試找到另一個解決方案來實現這個技巧，但是猜猜看是什麼，將其部署到服務器！

我希望這可以幫助別人

來源

2013-10-30 10:32:15 WickStargazer

我也面臨着同樣的問題http://stackoverflow.com/q/23146502/1903120。請爲我提出一個解決方案。 – user1903120 2014-04-18 05:11:27

我有完全相同的問題。

對我來說問題是，我是在我的列標題上設置了HTML ID。ExtJS的再追加有趣的話號，像titleEl，textEl，triggerEL。

如：

<div id="myPackageGridId1-titleEl" class="x-column-header-inner">

這必須以某種方式搞砸列聽衆。

解決方案：使用類代替。

來源

2014-07-03 13:39:42

在我的情況（GXT 2.2.1）我通過繼承的GridView，覆蓋getColumnStyle，並設置ADJ爲0解決了這一問題：

import com.extjs.gxt.ui.client.GXT; 
import com.extjs.gxt.ui.client.Style; 
import com.extjs.gxt.ui.client.widget.grid.GridView; 

public class GridViewBugFix extends GridView { 

    private boolean fixHeaderDisplacement = true; 

    public GridViewBugFix() { 
     super(); 
    } 

    @Override 
    protected String getColumnStyle(int colIndex, boolean isHeader) { 
     String style = !isHeader ? cm.getColumnStyle(colIndex) : ""; 
     if (style == null) { 
      style = ""; 
     } 

     int adj = GXT.isWebKit ? 2 : 0; 
     if (fixHeaderDisplacement) adj = 0; 

     style += "width:" + (getColumnWidth(colIndex) + adj) + "px;"; 
     if (cm.isHidden(colIndex)) { 
      style += "display:none;"; 
     } 
     Style.HorizontalAlignment align = cm.getColumnAlignment(colIndex); 
     if (align != null) { 
      style += "text-align:" + align.name() + ";"; 
     } 
     return style; 
    } 
}

來源

2017-07-27 08:25:21

extjs - 列標題和行數據不對齊

回答

相關問題