extjs - column headers and row data are not aligned

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 m开发者_JAVA百科y 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?

---

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!

---

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

---

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.

---

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.

---

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