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

Splitter 100% height and width but have minimum height and minimum width

4 Answers 371 Views

Splitter

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

Randall asked on 25 May 2011, 05:03 PM

Hello,

RadControls v2011.1.413.35

I am using a RadSplitter as a container for my application. The splitter has a top row that contains a header, a middle row that contains a nested RadSplitter with two columns (left side is a RadPanelBar menu and right side is content).

My requirements are to support a minimum screen resolution of 1024 x 768.

I want a RadSplitter that occupies 100% height and 100% width, but maintain a minimum height and width of 1000 x 600, and when this occurs, display horizontal and/or vertical scrollbars when necessary to be able to scroll to see the entire application.

I tried using your online example for 100% width and height and that works just fine. However, when I tried to limit the height and width using MinHeight and MinWidth properties for the RadPanes it does not work when the browser is resized smaller and I get no scrollbars.

Here is my Splitter code:

<div id="ParentDivElement" style="height: 100%;">

<telerik:RadSplitter ID="MainSplitter" runat=

"server"

Height="100%"

Width="100%"

Orientation="Horizontal"

>

<telerik:RadPane ID="TopPane" runat="server"

Height="64px"

MinHeight="64"

Scrolling="none"

>

</telerik:RadPane

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none">

<telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true">

<telerik:RadPane ID="LeftPane" runat="server"

Height="500px"

MinHeight="500"

MinWidth="220"

Width="220px"

>

</telerik:RadPane>

<telerik:RadPane ID="ContentPane" runat="server"

Height="500px"

MinHeight="500"

MinWidth="760"

Width="760px"

>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

is this possible?

Thanks,

Randall Price
Senior Developer
Virginia Tech

4 Answers, 1 is accepted

answered on 27 May 2011, 04:17 PM

Hi Randall,

When you have the RadSplitter configured in percentages, all its parent elements including the body, form and html should have their size explicitly set either in percentages or pixels in order to let the splitter calculate the size it should take. This is not new and I do not know why it worked in your previous version - you can see a sample demo explaining this below:

http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

This being said, you will get the desired behavior by adding the following style to your page:

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0;

padding: 0;

}

</style>

On a side note, I also suggest to set VisibleDuringInit=false for the splitter - this will hide the initial resizing of the splitter from the end user and you will get a better behavior.

Another thing I noticed is that you have both the nested splitter panes size set explicitly in pixels - I recommend to set Width in percentages because you do not know the width of the parent pane in pixels (it depends on the resolution, that is why percentages are used) and either remove the Height settings (they are ignored now and the nested splitter is as high as the parent pane) or set ResizeWithParentPane="false" for the nested splitter if you want to set height explicitly.

I hope that my explanations and suggestions are helpful - let me know how it goes or in case you need further assistance.

Kind regards,
Svetlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 27 May 2011, 06:53 PM

Hello Svetlina,

Thanks for your quick response. Actually, I am using the code from your suggested link already and I have the CSS you mentioned. I just did not include it in my original post. My RadSplitter does fill the entire screen just fine and resizes to fill the entire screen. But that is only half of what I want.

Let me clarify what I am after. I want the RadSplitter to be 100% height and 100% width unless the browser window is resized smaller than 1024x768, then I want the RadSplitter to resize to 1000x600 and not ever get any smaller. So this is like a hybrid: full screen but no smaller than 1000x600. Is this possible?

I would think that with trapping the OnClientBeforeResize() event and if the height or width goes below 1000x600 then cancel the resize event.

Does this sound reasonable or do you need further information from me?

Thanks,

Randall Price
Senior Developer
Virgina Tech

Accepted

answered on 30 May 2011, 12:31 PM

Hello Randall,

Thank you for the provided additional clarifications. The MinWidth and MinHeight properties are for the RadPanes and they are the minimum size when the panes are resized through the splitbar and not what you need in this case.

Indeed, check and cancelling in OnClientBeforeResize will work but you should also use a flag and it is also possible to get different behavior under different browsers.

That is why I suggest to implement your custom resizing which is simpler and easier in this case - here is some sample code I prepared for a start point for you:

<%@ Page Language="C#" %>

<%@ 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 runat="server">

<title>Untitled Page</title>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

<script type="text/javascript">

var minWidth = 1000;

var minHeight = 600;

window.onresize = ResizeSplitter;

function ResizeSplitter() {

var splitter = $find("<%=MainSplitter.ClientID %>");

if (!splitter) return;

var viewport = $telerik.getViewPortSize();

var widthToSet = viewport.width > 1000 ? viewport.width : 1000;

var heightToSet = viewport.height > 600 ? viewport.height : 600;

splitter.set_width(widthToSet);

splitter.set_height(heightToSet);

var wrapper = $get("ParentDivElement");

}

</script>

</telerik:RadCodeBlock>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div id="ParentDivElement" style="height: 100%">

<telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" VisibleDuringInit="false"

OnClientLoad="ResizeSplitter">

<telerik:RadPane ID="TopPane" runat="server" Scrolling="none" Height="64px">

</telerik:RadPane>

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none">

<telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true">

<telerik:RadPane ID="LeftPane" runat="server">

</telerik:RadPane>

<telerik:RadPane ID="ContentPane" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

I hope this is helpful, let me know how it goes.

Best wishes,
Svetlina
the Telerik team

answered on 03 Jun 2011, 07:54 PM

Hello Svetlina,

Thanks again for your quick response and excellent support. Your sample code for custom resizing allowed me to fix the height issues.

I now have a full-screen layout (header pane, middle pane, and footer pane). The middle pane contains a nested RadSplitter (RadPanelBar menu in left pane and content in right pane). The panes resize properly when the browser window resizes, and the RadPanelBar menu resizes with minimum and maximum widths. It works really nice and looks good, thanks again.

When time permits, I will post a working sample of this layout in case anyone else stumbles across this issue and needs help.

Thanks,

Randall Price
Senior Developer
Virginia Tech