Splitter Resize with browser window on IE8

6 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2012

    Posted 03 Jan 2013 Link to this post

    hi, i am having an issue on Splitter and its radslidingpane on IE8. When i set the splitter to a certain height (from my case 95-97%), the sliding event will keep looping the browser resize event. Any idea how this will happen?
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 04 Jan 2013 Link to this post

    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?
    • 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2012

    Posted 04 Jan 2013 Link to this post

    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. 

    <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>
  5. Vessy
    Admin
    Vessy avatar
    1387 posts

    Posted 08 Jan 2013 Link to this post

    Hi Michael,

    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.
  6. Nathan
    Nathan avatar
    52 posts
    Member since:
    Apr 2011

    Posted 04 Feb 2013 Link to this post

    Is there any other solution to this problem? I cannot make this change globally since it will affect other areas. 

    Thanks,
    Nathan
  7. Vessy
    Admin
    Vessy avatar
    1387 posts

    Posted 07 Feb 2013 Link to this post

    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):
    <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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017