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

Extra space after resizing browser window

4 Answers 104 Views

Splitter

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

roger asked on 09 Jul 2013, 07:21 PM

DemoPage-IE8.png

DemoPage-Safari.png

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">

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

<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

answered on 11 Jul 2013, 02:56 PM

HtmlPage.zip

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.

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