RadSplitter width and height not working after upgrade

[Danny]

I had an application, with an outlook sytle menu. It was working fine until upgraded the latest version of RadControlers.

Now, the splitters dont resize to 100%, instead, they sit at about 400px.

<%

 

@ Master Language="C#" AutoEventWireup="true" CodeBehind="Expd8.Master.cs" Inherits="Expd8.Expd8" %>

 

<!

 

 

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

 

<

 

 

link rel="Stylesheet" type="text/css" href="style.css" />

 

<

 

 

head runat="server">

 

 

 

<title></title>

 

 

 

<asp:ContentPlaceHolder ID="head" runat="server">

 

 

 

</asp:ContentPlaceHolder>

 

</

 

 

head>

 

<

 

 

body>

 

 

 

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

 

 

 

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

 

 

 

</telerik:RadScriptManager>

 

 

 

<telerik:RadFormDecorator ID="RadFormDecorator" runat="server" Skin="Windows7" DecoratedControls="Buttons" />

 

 

 

<div style="height:100%">

 

 

 

<telerik:RadSplitter ID="RadSplitter1" ResizeWithParentPane="false" Width="100%" Height="100%" Orientation="Horizontal" runat="server">

 

 

 

<telerik:RadPane ID="RadPane1" BorderWidth="5px" Width="100%" Height="80px" runat="server">

 

 

 

<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/Logo.png" />

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadPane ID="RadPane2" BorderWidth="5px" Height="100%" runat="server">

 

　

　

 

 

<telerik:RadSplitter ID="RadSplitter2" Width="100%" Height="100%" ResizeWithParentPane="false" Orientation="Vertical" runat="server">

 

 

 

<telerik:RadPane ID="RadPane3" BorderWidth="5px" Scrolling="None" Width="250px" MinWidth="250" MaxWidth="250" runat="server">

 

 

 

<telerik:RadSplitter ID="RadSplitter" Orientation="Horizontal" ResizeWithParentPane="false" Height="100%" Runat="server">

 

 

 

<telerik:RadPane ID="RadPane5" Height="100%" runat="server">

 

 

 

<table style=" height:100%; width:100%; background-color:#dfe9f5"> <tr><td valign="top">

 

 

 

<asp:ContentPlaceHolder ID="ContentPlaceHolderLeft" runat="server">

 

 

 

</asp:ContentPlaceHolder>

 

 

 

</td></tr></table>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadPane ID="RadPane6" BorderWidth="5px" Scrolling="None" Height="50px" runat="server">

 

 

 

 

<telerik:RadPanelBar ID="rLeftPanel" Height="100px"

 

 

 

ExpandMode="FullExpandedItem" BorderColor="Beige" ForeColor="AliceBlue"

 

 

 

BackColor="AliceBlue" runat="server" Skin="Windows7" SingleExpandedPanel="True"

 

 

 

FullExpandedPanels="True">

 

 

 

<Items>

 

 

 

 

<telerik:RadPanelItem runat="server" Text="Reports" CssClass="panelButton" NavigateUrl="SynopsisReport.aspx" ImagePosition="Right" ImageUrl="~/Images/synopreport.png" >

 

 

 

</telerik:RadPanelItem>

 

 

 

</Items>

 

 

 

</telerik:RadPanelBar>

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadPane ID="RadPane4" BorderWidth="5px" BorderStyle="Solid" Width="80%" runat="server">

 

 

 

<table>

 

 

 

<tr><td style="border:13px, solid, #abbdd5">

 

 

 

 

</td>

 

 

 

<td valign="top" align="left" style="border:3px, solid, #abbdd5; width:100%" width="100%" >

 

 

 

<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">

 

 

 

</asp:ContentPlaceHolder></td></tr>

 

 

 

</table>

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

 

 

 

 

</telerik:RadPane>

 

 

 

</telerik:RadSplitter>

 

 

 

 

 

</div>

 

 

 

</form>

 

</

 

 

body>

 

</

 

 

html>

 

[Dobromir]

Hi Danny,

To configure RadSplitter to occupy 100% of the browser you need to set all its parents to have height value set, including html, body and form elements.

After adding the following CSS the splitter is working as expected (please see the attached screenshot)

<style type="text/css">
    html, body, form
    {
        margin: 0;
        padding: 0;
        height: 100%;
    }
</style>

In the provided markup I noticed that there is a linked CSS file, if you have set the above mentioned CSS rule in that file could you please open a support ticket and provide sample page reproducing the problem with all related CSS and JavaScript code so we can investigate the issue further?

Greetings,
Dobromir
the Telerik team