GridPanel column widths not aligned with header in IE

[robdurkin]

With ExtJS 4.0.7 GPL, in Internet Explorer 8 the grid panel columns are not aligned with the column headers.

The column headers appear to be sized correctly, however the cells all appear to have the same width, evenly spaced out across all of the columns.

This bug does not manifest in either FireFox or Chrome, only IE as best as I can tell.

Here is a screenshot:



This problem occurs with IE 8 on Windows 7. I have not tested it with other version of IE, on another OS, or with a newer version of ExtJS.

I am using the feature of the grid panel that allows for passing meta data to the grid via json for grid configuration, rather than hardcoding the grid config.

Here is a code snippet:

{
  "success": true,
  "totalCount": 25,
  "root": [
    {
      "courseName": "",
      "totalDoctorates": 0,
      "totalMastersArtsScience": 3,
      "totalBachelors": 0,
      "totalAssociates": 1,
      "totalTeachingCertificates": 1,
      "totalMDivs": 0,
      "totalMBAs": 0,
      "totalOthers": 1
    },
   ...
 ]
 "metaData": {
   "idProperty": "id",
   "root": "root",
   "totalProperty": "totalCount",
   "successProperty": "success",
   "title": "Faculty Education by Course of Study (FA-11 Term)",
   "sortInfo": [
   ],
   "groupInfo": {
     "hideGroupedColumn": false,
     "startCollapsed": false,
     "groupMode": "value",
     "groupDir": "ASC"
   },
   "fields": [
     "courseName",
     "totalDoctorates",
     "totalMastersArtsScience",
     "totalBachelors",
     "totalAssociates",
     "totalMDivs",
     "totalMBAs",
     "totalTeachingCertificates",
     "totalOthers"
   ]
 },
 "columns": [
   {
     "header": "Course of Study",
     "dataIndex": "courseName",
     "sortable": true,
     "width": 200,
     "hidden": false,
     "menuDisabled": false,
     "groupable": true,
     "align": "left",
     "resizable": true,
     "xtype": "gridcolumn"
   },
   ...
   }]
}

Has anyone else come across this quirk in IE?

Thanks,
Rob

[robdurkin]

My screenshot didn't come through.

Trying again.

4-8-2012 7-34-56 PM.jpg

[mankz]

Using IE8 in compatibility mode?

[robdurkin]

I believe that it is enabled. Is this the problem? If so, I have no control over whether this enabled or not with regard to my client's browser configuration. Is there a workaround that will cause the browser to correctly render the grid regardless of this particular setting? Thanks.

[simon]

Hi,

robdurkin. I had exactly the same problems as you are.

You have some custom css included on the page.
Remove all included css files except ext-all.css and it will work!

[malstroem]

using ie8 compatibility mode might or might not be the problem...
still interesting to know: you can influence the rendering mode in IE with a specific header

e.g.

header('X-UA-Compatible: IE=IE8'); 

[simon]

In my case this css tag was the reason, that headers were not aligned with columns:

body{
text-align:center
}

br,s

[anikbose88]

Simon,
the problem is with the IE 8 being in compatibility mode. And the problem is that browser mode cannot be controlled. I am facing the same issue. If anyone have resolved this issue then please post it here. The screen comes perfect for me in Document Mode: IE8 and Browser Mode: IE8 Standard.

FYI, I can't ask my client to remove the compatibility mode in all the system of their network.

[slemmon]

Found myself in the same boat where the browsers were all on compat mode by default (on intranet).
Adding the following meta tag resolved the issue for me:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
though perhaps I should have used:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Took me quite a bit of time to turn that answer up for myself. Hope it helps.

For more reading:
http://stackoverflow.com/questions/6...ibility-button