1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    robdurkin is on a distinguished road

      0  

    Default GridPanel column widths not aligned with header in IE

    GridPanel column widths not aligned with header in IE


    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:

    Code:
    {
      "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

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    robdurkin is on a distinguished road

      0  

    Default


    My screenshot didn't come through.

    Trying again.

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

  3. #3
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,753
    Vote Rating
    106
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Arrow


    Using IE8 in compatibility mode?

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    robdurkin is on a distinguished road

      0  

    Default


    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    154
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default


    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!

  6. #6
    Ext JS Premium Member malstroem's Avatar
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    242
    Vote Rating
    0
    malstroem is on a distinguished road

      0  

    Default


    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.
    PHP Code:
    header('X-UA-Compatible: IE=IE8'); 

  7. #7
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    154
    Vote Rating
    0
    simon is on a distinguished road

      0  

    Default


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

    body{
    text-align:center
    }

    br,s

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    5
    Vote Rating
    0
    anikbose88 is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,120
    Vote Rating
    188
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    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