IE11 - RadPageLayout HiddenMd="True" not working correctly

3 posts, 0 answers
  1. Eric
    Eric avatar
    7 posts
    Member since:
    Jun 2017

    Posted 27 Sep 2018 Link to this post

    On IE11 when the browser width is 1014 the HiddenMd="True" setting should be hiding the row. This works correctly on Edge and Chrome. Here is a test page to recreate the problem.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TelerikTest.aspx.cs" Inherits="MEDP.Portal.TelerikTest" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title>Telerik Test</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    </head>
    <body>
    <telerik:RadScriptManager ID="PortalRootScriptManager" runat="server" EnablePageMethods="true">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <h1>Test site</h1>
        <telerik:RadPageLayout runat="server" GridType="Fluid" CssClass="MainContainer">
            <Rows>
                <telerik:LayoutRow runat="server" RowType="Container" WrapperHtmlTag="None" HiddenMd="True" HiddenSm="True" HiddenXs="True">
                    <Content>
                        <div>
                            Should be hidden in IE11 at 1014 resolution!
                        </div>
                    </Content>
                </telerik:LayoutRow>
            </Rows>
        </telerik:RadPageLayout>
    </body>
    </html>

    Please advise on how to fix this problem on IE 11.

     

     

  2. Eric
    Eric avatar
    7 posts
    Member since:
    Jun 2017

    Posted 28 Sep 2018 Link to this post

    Turns out we had some old CSS that was used to fix some issues for IE 6. Also it appears that in IE 11 the Telerik controls are using window.innerWidth that includes a vertical scrollbar width in its calculation instead of $(window).width() that subtracts the vertical scrollbar width.
  3. Eric
    Eric avatar
    7 posts
    Member since:
    Jun 2017

    Posted 28 Sep 2018 Link to this post

    Got this reply from the support ticket:

    Please verify that the Compatibility Mode in Internet Explorer is disabled by calling the alert(document.documentMode); in the browser console - https://www.telerik.com/support/kb/aspnet-ajax/details/disable-the-compatibility-view-mode-of-internet-explorer. 

    The provided code works as expected as demonstrated in this screencast: https://screencast-o-matic.com/watch/cFQu2DY1wd.

    Here is the code I added to achieve the blue line: 


    <style>
        html,body{
            margin:0;
            padding:0;
        }
    </style>
    <div style="height:1px; width:1024px; background-color:aqua">    </div>

    Was able to fix the issue by removing an IE 6 CSS file.

     

     

Back to Top