Results 1 to 9 of 9

Thread: GridPanel column widths not aligned with header in IE

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
      0  

    Default 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
      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
    3,015
    Vote Rating
    182
      0  

    Arrow

    Using IE8 in compatibility mode?

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
      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
    311
    Vote Rating
    5
      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
    261
    Vote Rating
    9
      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
    311
    Vote Rating
    5
      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
      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
    6,154
    Vote Rating
    247
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •