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

radplitter width cannot resize to 100%

2 Answers 106 Views

General Discussions

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

Johann asked on 21 Mar 2013, 01:08 PM

Hi

I am using the <telerik:RadSplitter> however I cannot get it to resize the width properly to 100%.

I have the following :-

<body>
<header>this is the header</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" EnableViewState="false" LiveResize="True" BorderSize="0" CssClass="Splitter">
<telerik:RadPane ID="RadPane1" runat="server" Width="311" BackColor="#ffffff" CssClass="Splitter">
<uc1:UCMainMenu ID="UCMainMenu1" runat="server" />
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward" >
</telerik:RadSplitBar>
<telerik:RadPane ID="Pane2" runat="server" BackColor="#FFFFFF" CssClass="Splitter">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</telerik:RadPane>
</telerik:RadSplitter>
</section>
</div>

<footer>this is the footer</footer>
</body>

and my CSS is as follows :-

html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}

body {
background-color: #fff;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}

form {
margin: 0;
padding: 0;
height: 100%;
}

/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}

#body {
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
height: 100%;
width: 100%;
}

.main-content {
padding-left: 10px;
padding-top: 30px;
height: 100%;
width: 100%;
}

header .content-wrapper {
padding-top: 20px;
}

.Splitter {
height: 100% !important;
width: 100% !important;
}

How can I get it to resize the width of the right pane to 100% of the screen?

When I remove the radsplitter and put a normal asp.net control, everything works as its supposed to.

Thanks

Johann

2 Answers, 1 is accepted

answered on 25 Mar 2013, 11:54 AM

Splitter.zip

Hi Johann,

There main reason for the experienced behavior is connected with s known limitation with such rendering. The Splitter is wrapped inside a div >> section, but the div (#body) has other siblings (footer and header). This is why it cannot calculate properly its sizes and even if they are configured to take 100% of the size of their parents.

If the additional elements are direct siblings to the Splitter, you could extract their size from its, by configuring its HeightOffset property.

Another thing which is highly recommended, is to set the Splitter/Panes width and height values, through the respective Height and Width properties (not with CSS styles).

I could suggest you the following ways to achieve the described scenario:

Remove the elements, which are wrapping the Splitter ( <div id="body"> and <section>) so the extra size could be subtracted from the Splitter's height, using its OffsetHeight property. Note, that if there are margins/paddings to the Splitter's parent element, they also should be substracted through the same property.
Add an additional Splitter, which is wrapping the content of the whole page, and the data from the footer/deader/section are distributed to three RadPanes inside it.
Calculate manually the size of the <div id="body"> with JavaScript, so the Splitter will be able to calculate its size properly with the current rendering.

For your convenience I am attaching a page, demonstrating the first approach, so you could examine it on your side. Note, that it demonstrates only the right way to configure the Splitter and the CSS styles of the removed elements are not applied.

I believe you might find useful information also in the following online resources:
    Specifying Size
    Filling the Entire Page
    Resize with Window

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.