Grid Column Header not aligning with data column on IE

[Jessica]

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

[Jessica]

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

[Viktor Tachev]

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