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

IE11 - RadPageLayout HiddenMd="True" not working correctly

2 Answers 88 Views

PageLayout

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

Eric asked on 27 Sep 2018, 06:46 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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 Answers, 1 is accepted

answered on 28 Sep 2018, 02:32 PM

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.