Extra space after resizing browser window

5 posts, 0 answers
  1. roger
    roger avatar
    26 posts
    Member since:
    Jun 2012

    Posted 09 Jul 2013 Link to this post

    hi support,

    I'm using RadSplitter and RadPane to build my page (see page markup as below). The page has min-height and min-width setup in order to show scrollbar(s) whenever the size of browser window hits the minimum height/width. The problem i have is an extra space appears at the bottom of page (under the most outer RadSplitter) after resizing the browser window to the min-height and this ONLY happens in IE8 and Safari 5.0 + (images attached), the page itself is quite simple and i don't know it's because i'm doing something wrong or related to telerik control. Please help and very appreciated!

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
              
            form.main 
            {            
                overflow: auto;
            }
      
              
            .MainDiv
            {
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
                min-height:500px;
                min-width:1000px;
            }
              
            .LeftColumn, .RightColumn
            {
                background: #eee;
            }
              
              
            .CenterColumn
            {
                background: #fff;
                border: 1px solid #777;
            }
              
            .Footer
            {
                background: #eee;
                text-align: center;
            }
              
            .Header
            {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <form id="form1" class="main" runat="server">
        <telerik:RadScriptManager ID="MasterRadScriptManager" runat="server">
        </telerik:RadScriptManager>
        <div id="mainDiv" class="MainDiv">
            <telerik:RadSplitter runat="server" ID="PageSplitter" Orientation="Horizontal" BorderSize="1"
                VisibleDuringInit="false" Width="100%" Height="100%">
                <telerik:RadPane runat="server" ID="TopHeaderPane" Height="50px" Locked="true" Scrolling="None">
                    <div class="Header">Top Header</div>
                </telerik:RadPane>
                <telerik:RadPane runat="server" ID="MainPane" Scrolling="None">
                    <telerik:RadSplitter runat="server" ID="MainSplitter" BorderSize="0" Orientation="Vertical"
                        VisibleDuringInit="false" Width="100%" Height="100%">
                        <telerik:RadPane runat="server" ID="LeftColumnPane" Scrolling="None" CssClass="LeftColumn"
                            Width="220px">
                            <div id="LeftSideColumn">Left side menu contents</div>
                        </telerik:RadPane>
                        <telerik:RadPane runat="server" ID="MainContentPane" Scrolling="None"
                            CssClass="CenterColumn">
                            <telerik:RadSplitter runat="server" ID="MainContentSplitter" Orientation="Horizontal"
                                BorderSize="1" VisibleDuringInit="false" Width="100%" Height="100%">
                                <telerik:RadPane runat="server" ID="MainContentScreenContentPane" Scrolling="Both">
                                    <asp:TextBox ID="textBox01" runat="server">Input textbox</asp:TextBox>
                                </telerik:RadPane>
                                <telerik:RadPane runat="server" ID="MainContentButtonBarPane" Scrolling="None" Height="40px"
                                    Locked="true">
                                    <asp:Button ID="SubmitButton" runat="server" Text="Submit" />
                                </telerik:RadPane>
                            </telerik:RadSplitter>
                        </telerik:RadPane>
                        <telerik:RadPane runat="server" ID="RightColumnPane" CssClass="RightColumn" Width="220px"
                            Scrolling="None">
                            <div id="RightSideColumn">Right side menu contents</div>
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadPane runat="server" ID="MasterFooterPane" Height="25px" CssClass="Footer"
                    Scrolling="None">
                    <div class="Footer">Footer Bar</div>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>

    thanks,
    Roger
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 11 Jul 2013 Link to this post

    Hi Roger,

    This problem is not directly related to RadSplitter but is a browser issue, you can observe the same behavious with standard HTML (please refer to the attached sample page). As a workaround for this issue, you can handle Splitter's ClientResized event and manually size it to the min values that you want, e.g.:
    function splitterResized(splitter, args) {
        var width = Math.max(1000,splitter.get_width()),
            height = Math.max(500,splitter.get_height());
     
        splitter.resize(width, height);
    }


    Regards,
    Dobromir
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. roger
    roger avatar
    26 posts
    Member since:
    Jun 2012

    Posted 12 Jul 2013 Link to this post

    hi Dobromir,

    You solution works for me.

    Thanks & very appreciate!

    Roger
  5. Hien Lam
    Hien Lam  avatar
    4 posts
    Member since:
    Oct 2012

    Posted 13 Oct 2013 Link to this post

    hi Dobromir,
    I have the same problem om Chrome. I saw that Roger has this problem on IE8 and Safari 5.0 . Can you elaborate more about this "browser issue".
    I already solve mine by using OnClientResized event ( same trick as yours) but what is the root cause of this?

    regards,
    Lam.
  6. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 16 Oct 2013 Link to this post

    Hello Hien,

    RadSplitter (and all RadControlls as a whole) are rendered with standard html elements (div, p, span, etc.). This means that if the used HTML elements have a specific behavior under different browsers we cannot avoid it, only to workaround it if it is possible.

    In this case, as you can see in the page attached by may colleague Dobromir, the problem can be reproduced with a sample DIVs layout, without any RadControls on the page.

    Regards,
    Veselina Raykova
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017