extjs - column headers and row data are not aligned - extjs

Question

I have a gridpanel and 5 columns in that. Problem is that column headers and row data are not aligned. I believe its just the problem in my project only as when i create an example with the same code then everything works fine. Check the following image:
Can anyone suggest what could be the problem?

Answer 1

Please apply below css as per the requirements.
1) For Customizing specific ExtJS GridPanel, apply below css:
#testgrid_id table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Note: Here, above "#testgrid_id" is the id of specific Grid Panel.
2) For applying to all ExtJS GridPanels, apply below css :
table caption,table th,table td {
padding : 0px !important;
margin : 0px !important;
}
Thanks!

Answer 2

Actually I found out that most times, the grid is under some panel.
Hence the actual problem is with this class
.x-grid-cell-inner
{
overflow: hidden;
padding: 2px 6px 3px;
**text-overflow: ellipsis;
white-space:nowrap;**
}
This is because the width of the or
<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td>
Does not get set. Making the Div overflowing the columns and screwing up the whole grid alignment.
Probably because i nested the GridPanel into another panel OR a Row expander in my case or under some modal dialogue or whatever it may be causing the settings not to take place.
A Quick Fix.
**white-space:normal;**
Will do the trick and squeeze the contents into the column. However it does not apply the ellipses so it is a bit annoying if the content is long, its not hidden with "..."
I will try to find another solution that does the trick, but guess what, time to deploy this to the server!
I hope this helps someone

Answer 3

I have this bug using GXT 2.2.5 (Chrome Version 26.0.1410.43m).
Solution:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.x-grid3-row td.x-grid3-cell
{
box-sizing: border-box;
}
}
Note, if your CSS contains something like:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
remote it.

Answer 4

I had exactly the same problem.
For me the problem was, was that I was setting HTML ids on my column headers. ExtJS then appends funny things to the ID, like titleEl, textEl, triggerEL.
Eg:
<div id="myPackageGridId1-titleEl" class="x-column-header-inner">
This must somehow screw up the column listener.
Solution : use class instead.

Answer 5

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