RadSplitter width and height not working after upgrade

2 posts, 0 answers
  1. Danny
    Danny avatar
    21 posts
    Member since:
    Jan 2009

    Posted 20 Nov 2010 Link to this post

    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>

     

  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 24 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top