ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: mvanhees on March 10, 2014, 08:26:56 pm

Title: Header problem with IE8
Post by: mvanhees on March 10, 2014, 08:26:56 pm

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.

Title: Re: Header problem with IE8
Post by: paramvir on March 11, 2014, 10:32:25 am

Could you post your colModel

Title: Re: Header problem with IE8
Post by: mvanhees on March 11, 2014, 11:25:34 am

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"}
    ];


Title: Re: Header problem with IE8
Post by: paramvir on March 11, 2014, 12:11:33 pm

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

Title: Re: Header problem with IE8
Post by: mvanhees on March 11, 2014, 02:18:36 pm

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.

Title: Re: Header problem with IE8
Post by: paramvir on March 11, 2014, 06:09:24 pm

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.