RadSplitter

[SSirica]

I'm trying to divide a content area into 4 equal quadrants.  so I have it setup like this:

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="Server">
    <telerik:RadSplitter RenderMode="Lightweight" ID="rsMain" runat="server" Height="100%" Width="100%" BorderStyle="None" BorderSize="1" CssClass="Center">
        <telerik:RadPane ID="Radpane10" runat="server" Scrolling="none" RenderMode="Lightweight">
            <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter6" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="Radpane11" runat="server" Height="50%" RenderMode="Lightweight">
                    <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter2" runat="server">
                        <telerik:RadPane ID="Radpane3" runat="server" CssClass="Round" Width="50%" Height="50%"  BackColor="Red">
                            Map
                        </telerik:RadPane>
                        <telerik:RadPane ID="Radpane4" runat="server" CssClass="Round" Width="50%" Height="50%">
                            Pie Chart
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadPane ID="Radpane5" runat="server" Height="50%" RenderMode="Lightweight">
                    <telerik:RadSplitter RenderMode="Lightweight" ID="Radsplitter1" runat="server">
                        <telerik:RadPane ID="Radpane1" runat="server" CssClass="Round" Width="50%" Height="50%">
                            Line Chart
                        </telerik:RadPane>
                        <telerik:RadPane ID="Radpane2" runat="server" CssClass="Round" Width="50%" Height="50%" BackColor="Green">
                            Grid
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
</asp:Content>

When it 1st comes up it looks like this:

 

After I resize the browser it looks like this which is what I was going for:

Thoughts or suggestions on how to have it look like the second screen shot all the time?

[Vessy]

Hello Steve,

When you want a Splitter to take size in percentages, you have to make sure that all of its parent also have size configured in percentages (up to a parent with a fixed size). You can find detailed information on the subject in the following online resources:

• Filling the Entire Page
• Specifying Size
• Resize with Window
  

If a Splitter has any sibling elements )like the header in the attached screenshots), you should extract the siblings height, because otherwise the size of their parent element will become 100%+some additional pixels (Splitter's height + sibling(s) height). I could suggest you two possible approaches in this situation:

• If you know the exact height of the siblings elements, you can set it as a value of the Splitter's HeightOffset property.
• Or you can use one additional RadSplitter, putting the sibling elements into a separate RadPane than the Splitter, so the sizing will be handled by the additional Splitter

For convenience, I am attaching a sample project where the provided Splitter is sized properly. Please, examine it and let me know if I can assist you any further on this matter after that.

Regards,
Vessy
Progress Telerik