extjs - column headers and row data are not aligned

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