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

Extra space after resizing browser window

4 Answers 27 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
roger
Top achievements
Rank 1
roger asked on 09 Jul 2013, 07:21 PM

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

4 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 11 Jul 2013, 02:56 PM
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.
0
roger
Top achievements
Rank 1
answered on 12 Jul 2013, 04:51 PM
hi Dobromir,

You solution works for me.

Thanks & very appreciate!

Roger
0
Hien Lam
Top achievements
Rank 1
answered on 14 Oct 2013, 02:18 AM
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.
0
Vessy
Telerik team
answered on 16 Oct 2013, 02:53 PM
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.
Tags
Splitter
Asked by
roger
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
roger
Top achievements
Rank 1
Hien Lam
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or