Header problem with IE8

[mvanhees]

Hello,

With IE 8, the header of my grid are crop,
The div that produce the problem is the one with the class "pq-header-outer ui-widget-header".
With IE8, I have an inline-style with height at 45px.
With IE11, the height is at 56px, that look better.

In the attachement, IE11 is at the left and IE8 at the right.

I have another grid more complexe with grouping header, filter that have the same issue.

How can I fix this issue?

Thanks,
Michel.

[paramvir]

Could you post your colModel

[mvanhees]

Here it is:

Code: [Select]

grid.colModel =
    [
        { title: "", hidden: true, editable: false, dataIndx: "FIELD1"},
        { title: "<span data-i18n='table.field2'>Field2</span>", dataType: "string", align: "center", width: 100, editable: false, dataIndx: "FIELD2",
            filter: { type: 'select',
                options: ['','v2'],
                condition: 'equal',
                listeners: [{ change: function (evt, ui) {
                    filter(conditionGridId, "FIELD2", $(this).val());
                }
                }]
            }},
        { title: "<span data-i18n='table.field3'>FIELD3</span>", dataType: "string", align: "center", width: 100, editable: false, dataIndx: "FIELD3", getEditCellData: function (ui) {
            var $cell = ui.$cell;
            return $cell.children().val();
        },filter: { type: 'select',
            options: ['', 'LS'],
            condition: 'equal',
            listeners: [{ change: function (evt, ui) {
                filter(conditionGridId, "FIELD3", $(this).val());
            }
            }]
        }
        },
        { title: "<span data-i18n='table.field4'>FIELD4</span>", dataType: "string", align: "center", width: 100, editable: false, dataIndx: "FIELD4",
            filter: { type: 'select',
                options: ['', 'v2'],
                condition: 'equal',
                listeners: [{ change: function (evt, ui) {
                    filter(conditionGridId, "FIELD4", $(this).val());
                }
                }]
            }},
        { title: "<span data-i18n='table.field5'>FIELD5</span>", editable: true, align: "center", dataType: "float", width: 100, dataIndx: "FIELD5"},
        { title: "<span data-i18n='table.field6'>FIELD6</span>", editable: true, align: "center", dataType: "float", width: 100, dataIndx: "FIELD6"},
        { title: "<span data-i18n='table.field7'>FIELD7</span>", editable: true, align: "center", dataType: "float", width: 100, dataIndx: "FIELD7"},
        { title: "<span data-i18n='table.field8'>FIELD8</span>", editable: true, align: "center", dataType: "float", width: 100, dataIndx: "FIELD8"},
        { title: "<span data-i18n='table.field9'>FIELD9</span>", editable: true, align: "center", dataType: "float", width: 120, dataIndx: "FIELD9"}
    ];


[paramvir]

It displays fine in IE8.

your colModel is similar to http://paramquery.com/pro/demos/filter_header_local

Does http://paramquery.com/pro/demos/filter_header_local show any display problems in your IE8

[mvanhees]

Hello,

Effectivly, I test your page on my IE8 and it work fine.

Actually I use bootstrap for the site and maybe it interfair with the grid render.
In my grid I have a space before the header title, not in yours.

I dig a little bit and find some difference also from your version and mine,
The cell generate on my side have the following class on the header row: "pq-grid-col pq-align-center pq-right-col"
and yours have : "pq-grid-col pq-wrap-text pq-right-col".

Regards,
Michel.

[paramvir]

I checked your colModel in IE8, it looks fine.

Please try to isolate the problem. check the grid on an isolated page without including any bootstrap files.

With bootstrap files, check in the browser style inspector and see whether any bootstrap styles are interfering with the header.