Top Splitter and Right Splitter won't split screen

[Joe]

Hi,
I created an Outlook type interface and looks real sharp using the splitter controls.  However I noticed that my top splitter will not split and the right splitter when I click the collapse portion completely disappears and will not return.

Here is my code:

Any suggestions on what I am doing wrong would be helpful.  This is awesome btw.
Thanks,

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager" runat="server" />
    <div id="ParentDivElement" style="height: 100%;">
        <telerik:RadSplitter ID="MainSplitter" runat="server" Skin="Office2007" Height="100%"
            Width="100%" Orientation="Horizontal">
            <telerik:RadPane ID="TopPane" runat="server" Height="75" MinHeight="75" MaxHeight="150"
                Scrolling="None">
                <div id="headerDiv">
                    <div id="logo">
                        <a href="Default.aspx">
                            <img src="/Images/logo.png" alt="Astonish Results Logo" border="0" height="49px"
                                width="171px" />
                        </a>
                    </div>
                    <table width="100%" align="right">
                        <tr>
                            <td>
                            </td>
                            &nbsp;</tr>
                        <tr>
                            <td>
                            </td>
                            &nbsp;</tr>
                        <tr>
                            <td>
                            </td>
                            &nbsp;</tr>
                        <tr valign="bottom">
                            <td style="height: 24px" align="left">
                            </td>
                            <td style="height: 24px" align="right">
                                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="">
                                    <asp:Image ID="Image2" runat="server" ImageUrl="Images/Profile.gif" ToolTip="User Profile" />
                                </asp:HyperLink>
                                <asp:Label ID="Label1" Font-Bold="true" runat="server" Text="<%%>"></asp:Label>
                                <asp:Label ID="lblLoggedName" Font-Bold="true" Font-Underline="true" runat="server"
                                    Text=""></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="MainPane" runat="server" Scrolling="None" MinWidth="500">
                <telerik:RadSplitter ID="Radsplitter2" runat="server" Skin="Office2007" LiveResize="false">
                    <telerik:RadPane ID="Radpane1" runat="server" Width="175" MinWidth="175" MaxWidth="400">
                        <!-- Place the content of the pane here -->
                        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Office2007" Width="175px">
                            <Items>
                                <telerik:RadPanelItem runat="server" Text="VPC Leads" Target="" ImageUrl="~/Images/Menu/contacts.gif"
                                    Expanded="True">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="Prospects" ImageUrl="~/Images/Menu/TabStripPr.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|1|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Active Leads" ImageUrl="~/Images/Menu/Combobox_Win.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeads.aspx?LeadType=|0|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Active Clients" ImageUrl="~/Images/Menu/ChartPr.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Campaigns" Target="contentPane" ImageUrl="~/Images/Menu/folderlist.gif">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="Administrator Campaign" ImageUrl="~/Images/Menu/MenuPr.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|1|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Administrator E-Mail Templates" ImageUrl="~/Images/Menu/48.png"
                                            NavigateUrl="~/VPCLeads/VPCLeads.aspx?LeadType=|0|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Custom Campaigns" ImageUrl="~/Images/Menu/report.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Custom E-Mail Templates" ImageUrl="~/Images/Menu/48.png"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="E-Mail Tracking" Target="contentPane"
                                    ImageUrl="~/Images/Menu/48.png">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="One-Off Sends" ImageUrl="~/Images/Menu/4.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|1|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Bulk E-Mail Sends" ImageUrl="~/Images/Menu/2.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeads.aspx?LeadType=|0|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Advanced Bulk E-Mail" ImageUrl="~/Images/Menu/4Inbox.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="E-Mail Tracking" ImageUrl="~/Images/Menu/8.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Reports" Target="contentPane" ImageUrl="~/Images/Menu/tasks.gif">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="Agency Leads" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|1|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Average Closing Days" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeads.aspx?LeadType=|0|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Average Days in Status" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Leads By State" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Leads By Status" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Login" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Statistics" ImageUrl="~/Images/Menu/notesitems.gif"
                                            NavigateUrl="~/VPCLeads/VPCLeadCounts.aspx?LeadType=|2|" Target="contentPane">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                                <telerik:RadPanelItem runat="server" Text="Administration" Target="contentPane" ImageUrl="~/Images/Menu/contacts.gif">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="Generate HTML" ImageUrl="~/Images/Menu/tasksItems.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Manage Auto-Responder" ImageUrl="~/Images/Menu/9.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Manage Company Information" ImageUrl="~/Images/Menu/3drafts.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Manage Office Information" ImageUrl="~/Images/Menu/tasksItems.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Manage Products" ImageUrl="~/Images/Menu/icon.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Manage Statuses" ImageUrl="~/Images/Menu/tasksItems.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="Manage Users" ImageUrl="~/Images/Menu/tasksItems.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                        <telerik:RadPanelItem runat="server" Text="User Profile" ImageUrl="~/Images/Menu/tasksItems.gif"
                                            NavigateUrl="" Target="contentPane">
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelBar>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="contentPane" runat="server" Scrolling="Y" ContentUrl="home.aspx">
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Backward" />
                    <telerik:RadPane ID="schedulePane" runat="server" Width="220">
                        <telerik:DatePickingCalendar ID="DatePickingCalendar1" runat="server" Skin="Office2007"
                            SelectedDayStyle-BackColor="#FFCC66">
                        </telerik:DatePickingCalendar>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>
    </form>

[Svetlina Anati]

Hi Joe,

In order to configure the splitter correctly in percentages, you should include the following style in your page's head:

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

After I did this everything started working as expected. Let us know wether this fixes the problem on your side, too.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Joe]

Hi Svetlina,
I found out my issue.  It's deals with the table layout.  Once I reset and use DIVs, everything started working the right way.  Thanks for all your help.