5 Answers, 1 is accepted
0
Hi Michael,
We are not aware of such behavior of RadSplitter. Unfortunately, the provided information is not enough to determine the exact cause of the issue. Could you please provide more detailed information on the specific scenario?
Regards,
Dobromir
the Telerik team
We are not aware of such behavior of RadSplitter. Unfortunately, the provided information is not enough to determine the exact cause of the issue. Could you please provide more detailed information on the specific scenario?
- Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?
- Are you able to reproduce this behavior under different browsers?
- Are there any custom JavaScript / CSS registered on the page? Could you please try to remove them and see if the problem still occurs?
- Could you please provide a simple fully runnable project reproducing the problem so we can investigate it further?
Regards,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
Rank 1
answered on 04 Jan 2013, 02:35 PM
hi Dobromir,
the current version is RadControls 2012 Q3 and .NET 4.0. This issue only happen on IE8. It works well on Firefox or chrome. I believe the problem is because of the scroll bar on IE8. When the RadSlidingPane slide out from hidden slidingzone, it will force browser to adjust the window size. In my case, the height between 95%-97% on the splitter will trigger the browser to resize and show the scrollbar and disappear after resized. And this is where the problem occur, once the scrollbar disappear, the slidingpane will show the slide out animation again and repeat the same resize process again and again. And i have just recently upgrade the radcontrol from Q2 2012 to Q3 2012. And this problem does not occur on Q2.
the current version is RadControls 2012 Q3 and .NET 4.0. This issue only happen on IE8. It works well on Firefox or chrome. I believe the problem is because of the scroll bar on IE8. When the RadSlidingPane slide out from hidden slidingzone, it will force browser to adjust the window size. In my case, the height between 95%-97% on the splitter will trigger the browser to resize and show the scrollbar and disappear after resized. And this is where the problem occur, once the scrollbar disappear, the slidingpane will show the slide out animation again and repeat the same resize process again and again. And i have just recently upgrade the radcontrol from Q2 2012 to Q3 2012. And this problem does not occur on Q2.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
.RadForm_Office2007.rfdZone
{
background-color: yellow !important;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True"
ScriptMode="Debug" EnableScriptCombine="False">
<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>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="True" />
<telerik:RadWindowManager Behaviors="Pin, Move, Reload, Close" ID="RadWindowManager"
RestrictionZoneID="RestrictionZone" Opacity="100" runat="server" Modal="True"
AutoSize="true" RegisterWithScriptManager="True" VisibleStatusbar="False" DestroyOnClose="true"
ReloadOnShow="True" MinHeight="500px" MinWidth="600px">
<Windows>
</Windows>
</telerik:RadWindowManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TabStrip">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TabStrip"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">
</telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadMultiPage1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">
</telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<div style="float: right; background-color: Transparent;">
<telerik:RadComboBox ID="RadComboBox1" runat="server">
</telerik:RadComboBox>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" PersistenceMode="Cookie"
ShowChooser="True">
</telerik:RadSkinManager>
</div>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%"
Enabled="False" Visible="False">
</telerik:RadAjaxPanel>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="96%" VisibleDuringInit="False"
BackColor="Transparent" BorderColor="Transparent" LiveResize="True">
<telerik:RadPane runat="server" Width="20px" BackColor="Transparent" BorderColor="Transparent">
<telerik:RadSlidingZone runat="server" BackColor="Transparent" BorderColor="Transparent">
<telerik:RadSlidingPane ID="SidePanel" runat="server" Title="Menu"
Width="256px" DockOnOpen="False" PersistScrollPosition="True" Scrolling="None">
<telerik:RadPanelBar ID="CalendarPanel" runat="server" Font-Size="Medium" BackColor="Transparent"
BorderColor="Transparent" PersistStateInCookie="True" Width="100%">
<Items>
<telerik:RadPanelItem Text="Calendar" Expanded="True">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar ID="RadCalendar1" runat="server" Width="100%">
</telerik:RadCalendar>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
<telerik:RadPanelBar ID="radpanelbar" runat="server" Font-Size="Medium" BackColor="Transparent"
BorderColor="Transparent" PersistStateInCookie="True" Width="100%" >
</telerik:RadPanelBar>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane runat="server" Width="100%">
<telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="RadMultiPage1" Width="100%"
SelectedIndex="2" >
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" EnableAjaxSkinRendering="true"
SelectedIndex="2">
</telerik:RadMultiPage></telerik:RadPane>
</telerik:RadSplitter>
<div class="footer">
</div>
</form>
</body>
</html>
<head id="Head1" runat="server">
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
.RadForm_Office2007.rfdZone
{
background-color: yellow !important;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True"
ScriptMode="Debug" EnableScriptCombine="False">
<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>
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableRoundedCorners="True" />
<telerik:RadWindowManager Behaviors="Pin, Move, Reload, Close" ID="RadWindowManager"
RestrictionZoneID="RestrictionZone" Opacity="100" runat="server" Modal="True"
AutoSize="true" RegisterWithScriptManager="True" VisibleStatusbar="False" DestroyOnClose="true"
ReloadOnShow="True" MinHeight="500px" MinWidth="600px">
<Windows>
</Windows>
</telerik:RadWindowManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TabStrip">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TabStrip"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">
</telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadMultiPage1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1">
</telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<div style="float: right; background-color: Transparent;">
<telerik:RadComboBox ID="RadComboBox1" runat="server">
</telerik:RadComboBox>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" PersistenceMode="Cookie"
ShowChooser="True">
</telerik:RadSkinManager>
</div>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%"
Enabled="False" Visible="False">
</telerik:RadAjaxPanel>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="96%" VisibleDuringInit="False"
BackColor="Transparent" BorderColor="Transparent" LiveResize="True">
<telerik:RadPane runat="server" Width="20px" BackColor="Transparent" BorderColor="Transparent">
<telerik:RadSlidingZone runat="server" BackColor="Transparent" BorderColor="Transparent">
<telerik:RadSlidingPane ID="SidePanel" runat="server" Title="Menu"
Width="256px" DockOnOpen="False" PersistScrollPosition="True" Scrolling="None">
<telerik:RadPanelBar ID="CalendarPanel" runat="server" Font-Size="Medium" BackColor="Transparent"
BorderColor="Transparent" PersistStateInCookie="True" Width="100%">
<Items>
<telerik:RadPanelItem Text="Calendar" Expanded="True">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar ID="RadCalendar1" runat="server" Width="100%">
</telerik:RadCalendar>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
<telerik:RadPanelBar ID="radpanelbar" runat="server" Font-Size="Medium" BackColor="Transparent"
BorderColor="Transparent" PersistStateInCookie="True" Width="100%" >
</telerik:RadPanelBar>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
<telerik:RadPane runat="server" Width="100%">
<telerik:RadTabStrip ID="TabStrip" runat="server" MultiPageID="RadMultiPage1" Width="100%"
SelectedIndex="2" >
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" EnableAjaxSkinRendering="true"
SelectedIndex="2">
</telerik:RadMultiPage></telerik:RadPane>
</telerik:RadSplitter>
<div class="footer">
</div>
</form>
</body>
</html>
0
Hi Michael,
In order to avoid this behavior you will need to add the following CSS style to your page:
Kind Regards,
Vesi
the Telerik team
In order to avoid this behavior you will need to add the following CSS style to your page:
html, body, form{ height: 100%; margin: 0px; padding: 0px; overflow: hidden;}Kind Regards,
Vesi
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Nathan
Top achievements
Rank 2
Rank 2
answered on 04 Feb 2013, 10:00 PM
Is there any other solution to this problem? I cannot make this change globally since it will affect other areas.
Thanks,
Nathan
Thanks,
Nathan
0
Hi Michael,
The only other solution that I could suggest you is to wrap the Splitter control into an additional div and to set the same style to it (instead of setting it to the body):
I hope this would be helpful for you.
Regards,
Vesi
the Telerik team
The only other solution that I could suggest you is to wrap the Splitter control into an additional div and to set the same style to it (instead of setting it to the body):
<div id="wrapper" style="width: 100%; height: 100%; overflow: hidden"> <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="96%" VisibleDuringInit="False" BackColor="Transparent" BorderColor="Transparent" LiveResize="True"> ... </telerik:RadSplitter></div>I hope this would be helpful for you.
Regards,
Vesi
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.