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

[Solved] RadSlidingZone Skinning Issue After Upgrade

4 Answers 122 Views

PanelBar

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

Rob asked on 26 Mar 2014, 02:50 PM

ie11_radslidingpane.jpg

ie8_radslidingpane.jpg

I am attempting to upgrade a .Net web app with Telerik RadControls Q3 2011 to Q3 2013 and have run into skinning issues with the RadSlidingZone. The browser is also being upgraded from IE8 running in Compatibility View to IE11 in Edge Mode.

Attached (IE8_RadSlidingZone.jpg) is what the RadSlidingZones on the far left used to look like and needs to maintain its appearance.

Attached (IE11_RadSlidingZone.jpg) is what the RadSlidingZones look like after upgrading the Telerik .dll's and running in IE11.

The issue is the size/height of each sliding zone has shrunk down so that the text is unreadable.

<telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%" OnClientExpanded="pNav_ClientExpanded">

<div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px;

height: 100%;" class="tabsContainer">

<telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true"

Width="22">

<telerik:RadSlidingPane ID="slPane1" Title="Tab 1 Title" runat="server" Width="275"

EnableDock="false" Height="100px">

<div runat="server" id="divSlPane1">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane2" Title="Tab 2 Title" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane2">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane3" Title="Tab 3 Title" runat="server" Width="275"

EnableDock="false" Height="100%" OnClientExpanded="slPane3_ClientExpanded" OnClientCollapsed="slPane3_ClientCollapsed">

<div runat="server" id="divSlPane3">

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</div>

<div style="height: 100%;">

<asp:PlaceHolder runat="server" ID="phLeft" />

</div>

</telerik:RadPane>

.tabsContainer, .rspTabsContainer {

background: #B0C4DE !important;

border-right: #336699 1px solid !important;

}

Any suggestions?

Thanks,

Rob

4 Answers, 1 is accepted

answered on 27 Mar 2014, 10:20 AM

Hi,

We are aware of this issue and it has been already logged into our bug tracking system. You can track its progress and vote for it here: The Title of a SlidingPane tab is truncated in IE11 and IE8.

The only workaround I could provide is to hardcore the tabs height:

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

<head runat="server">

<title></title>

<style>

.rspPaneTabContainer {

height: 50px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<telerik:RadSplitter runat="server">

<telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%">

<div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px; height: 100%;"

class="tabsContainer">

<telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true"

Width="22">

<telerik:RadSlidingPane ID="slPane1" Title="Tab 1 Title" runat="server" Width="275"

EnableDock="false" Height="100px">

<div runat="server" id="divSlPane1">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane2" Title="Tab 2 Title" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane2">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane3" Title="Tab 3 Title" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane3">

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</div>

<div style="height: 100%;">

<asp:PlaceHolder runat="server" ID="phLeft" />

</div>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

The only thing is that if you have different labels they will need a different height, so you will need to target it through the item ID.

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

<head runat="server">

<title></title>

<style>

#RAD_SLIDING_PANE_TAB_slPane1 {

height: 50px;

}

#RAD_SLIDING_PANE_TAB_slPane2 {

height: 70px;

}

#RAD_SLIDING_PANE_TAB_slPane3 {

height: 90px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server"></asp:ScriptManager>

<telerik:RadSplitter runat="server">

<telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%">

<div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px; height: 100%;"

class="tabsContainer">

<telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true"

Width="22">

<telerik:RadSlidingPane ID="slPane1" Title="Tab 1 Title" runat="server" Width="275"

EnableDock="false" Height="100px">

<div runat="server" id="divSlPane1">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane2" Title="Tab 2 Title" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane2">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane3" Title="Tab 3 Title" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane3">

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</div>

<div style="height: 100%;">

<asp:PlaceHolder runat="server" ID="phLeft" />

</div>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Please, excuse us for any inconveniences caused.

Regards,
Bozhidar
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

answered on 27 Mar 2014, 05:13 PM

truncatedtext.jpg

I got your first suggestion to work, kind of. I was able to set the height of all 3 sliding panes with the rspPaneTabContainer style, but the text is now truncated. Please see attachment and advise.

Your 2nd suggestion for setting different heights to individual sliding panes did not work at all for me. I even tried using the ClientID (ctl00_cpB_slPane1, ctl00_cpB_slPane2, & ctl00_cpB_slPane3) to no avail.

answered on 31 Mar 2014, 09:17 AM

splitter.png

Hello,

I have tested in all browsers the code that was provided in the previous message and the result is fine in all of them. Attached is an image showing the result in the browser.

Do you have any additional CSS attached to the page that could cause the issue shown on your screenshot? Could you try to remove it, and check if the problem still exists? If it still exist, we will need a runnable code example that reproduces it, so we would be able to test it locally and to provide a proper solution.

Regards,
Bozhidar
Telerik

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.