Extjs - column headers and row data are not aligned

Question

I have a grid and 5 columns. The problem is that the column headers and row data are not aligned. I believe that this is just a problem in my project, only when I create an example with the same code, then everything works fine. Check out the following image:

Can anyone suggest what might be the problem?

Answer 1

Please apply below css as required.

1) To configure a specific ExtJS GridPanel, apply the css below:

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

Note. Here above, "#testgrid_id" is the identifier of a specific grid panel.

2) To apply to all ExtJS GridPanels, apply the css below:

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

Thanks!

Answer 2

Actually, I found out that in most cases the grid is under some kind of panel. Therefore, the actual problem lies in this class

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

This is due to the fact that the width or

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

Not installed. Creating a Div overflows the columns and spins the alignment of the entire grid.

Perhaps because I put the GridPanel in another panel OR the Row extender in my case either under some kind of modal dialog or whatever, which may lead to the fact that the settings will not be performed.

Quick fix.

  **white-space:normal;** 

Will do the trick and compress the contents into a column. However, he does not use ellipses, so it’s a little annoying, if the content is long, they don’t hide it with "..."

I will try to find another solution that does the trick, but guess what, time to deploy it on the server!

I hope this helps someone

Answer 3

I have this error using GXT 2.2.5 (Chrome version 26.0.1410.43m).

Decision:

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

Note that if your CSS contains something like:

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

delete it.

Answer 4

I had exactly the same problem.

For me, the problem was that I set HTML identifiers in my column headers. Then ExtJS adds funny things to the identifier, for example titleEl , textEl , triggerEL .

For example:

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

This should somehow ruin the column listener.

Solution: use a class .

Answer 5

In my case (GXT 2.2.1), I fixed the problem by subclassing GridView, overriding getColumnStyle and setting the parameter to 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; } }