Telerik RadGrid rendering problems with IE11 in compatibility mode

In some of my old projects, I use the Telerik ASP.NET AJAX control library, . Unfortunately, some customers still use Internet Explorer 11 in compatibility mode… and here the problems begins…

To be correct the problem begins when we try to force IE11 working from compatibility mode to standard mode using the header:

X-UA-Compatible: IE=Edge

Usually we do this configuring application’s web.config in this way:

<httpProtocol>
   <customHeaders>
   ...
   <add name="X-UA-Compatible" value="IE=Edge" />
   ....
   </customHeaders>
...

The problem arises with the RadGrid control. In the situation explained above (IE11 in compatibility mode forced to work in standard mode using “X-UA-Compatible” directive) the RadGrid control render itself in a curious way: column headers are compressed to the left and not aligned to the data columns below. Unfortunately I cannot show you an image of this behaviour, but trust me, it’s the truth…

I finally found a solution adding the following CSS directives:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
div.rgHeaderDiv table {
width: 100%;
}

div.rgDataDiv table {
width: 100%;
}

td.rsHorizontalHeaderWrapper div.rsInnerFix table.rsHorizontalHeaderTable {
width: 100%;
}

td.rsContentWrapper div.rsContentScrollArea table.rsAllDayTable {
width: 100%;
}
}

Note that the media query guarantees that the styles are applied only for Internet Explorer 10 and above.

I hope you will find useful this post.

Bye bye!

Related Posts