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

RadSplitter - BorderSize=0 - Splitter doesn't render

1 Answer 24 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 27 Jan 2014, 01:20 PM
I have a problem were the splitter doesn't render properly when BorderSize = 0

At the bottom of this post is how I want the code to be.

I have set BorderSize="0" to get rid of the borders and I have OnClientLoaded calling javascript function SplitterLoaded so that the Height of the Splitter is equal to the content.

when the page loads, its fine. when I change the size of the browser though (without reloading the page), the Splitter completely disappears - apart from the button that does the collapsing of the panels.

When I remove the BorderSize="0" tag, it works fine.
so I can change the size of the browser by double-clicking the top of the browser window so that it makes the window slightly smaller, or I can start with the window smaller (not filling the full screen) and then drag from the edges of the browser to make it bigger/smaller.

both ways will result in the Splitter not showing properly
<div id="content">
 
 
                   <telerik:RadSplitter BorderSize="0" OnClientLoaded="SplitterLoaded"   VisibleDuringInit="false"  ID="RadSplitter2" Width="100%" Height="100%" runat="server" Orientation="Vertical">
                       <telerik:RadPane ID="pane1" runat="server" Width="120px"
                           Scrolling="None">
                           <div class="sidebar">
                               <comx:VMenu ID="VMenu" runat="server" />
                           </div>
                       </telerik:RadPane>
                       <telerik:RadSplitBar EnableResize="false" CollapseMode="Forward" ID="RadSplitBar1" runat="server">
                       </telerik:RadSplitBar>
                       <telerik:RadPane ID="pane2" runat="server" >
         
                               <div class="workingarea_splitter">
                                   <comx:Menubar ID="MenuBar" runat="server" />
                                   <asp:Label ID="lblItemName" runat="server" CssClass="itemname" />
                                   <asp:Label ID="lblError" runat="server" CssClass="invisible" />
                                   <asp:ContentPlaceHolder ID="Content" runat="server" />
                               </div>
        
                       </telerik:RadPane>
                   </telerik:RadSplitter>
 
 
               </div>


function SplitterLoaded(splitter, arg) {
    var pane = splitter.getPaneById('<%= pane2.ClientID %>');
    var height = pane.getContentElement().scrollHeight;
    splitter.set_height(splitter.get_height() - pane.get_height() + height);
    pane.set_height(height);
    }


1 Answer, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 27 Jan 2014, 02:49 PM
easy fix! add 

OnClientResized="SplitterLoaded"

to the RadSplitter
Tags
Splitter
Asked by
David
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Share this question
or