This is a migrated thread and some comments may be shown as answers.

Grid Column Header not aligning with data column on IE

2 Answers 157 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jessica
Top achievements
Rank 1
Jessica asked on 26 Mar 2018, 10:41 AM

Hi,

 

I'm having an issue with columns widths on Internet Explorer.

 

This occurred when upgrading from 2017.1.223 to 2018.1.221.

 

Changing the widths of columns on the razor code doesn't change anything in IE. If I render the page, then try to change the width by dragging the header cell, the columns align, but still don't take up the full width, like normal. I have attached a screenshot of the columns aligned after messing with them is called after-align.png

 

I have attached screenshots of the grid in both Chrome and IE too. Again, the grid works in Chrome, but doesn't work in IE. Let me know if you need any more information!

 

Thanks,

Jessica

2 Answers, 1 is accepted

Sort by
0
Jessica
Top achievements
Rank 1
answered on 26 Mar 2018, 11:14 AM

I have a temporary fix for this:

 

Setting the width of ".k-grid-content" to initial forces the grid to 100% width, however, this only works whilst setting the width from the developer tools, after rendering the page. Setting this property from the CSS file doesn't work. (It isn't being overridden by another rule, it has top priority, but has a red line underneath).

 

I hope this information helps with solving the issue.

 

Thanks,

Jessica

0
Viktor Tachev
Telerik team
answered on 27 Mar 2018, 12:15 PM
Hi Jessica,

There can be misalignment observed in IE if it is running in Compatibility Mode. As this mode uses old rendering mechanism it is not supported and can cause unexpected results. Please ensure that Compatibility Mode is disabled. 

In case the IE is running in standard mode please send us a dojo sample or a runnable project where the behavior is replicated. This will enable us to examine the issue locally and look for its cause.

Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Jessica
Top achievements
Rank 1
Answers by
Jessica
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or