Setting Splitter Height

4 posts, 1 answers
  1. David
    David avatar
    2 posts
    Member since:
    Feb 2014

    Posted 26 Feb 2014 Link to this post

    I have setup a simple vertical splitter.  When I change the size of the browser window, the width of the splitter follows the width of the browser window as I intended.

    How do I do the same with the height?  I can set the height of the splitter to 100% but I am only permitted to set the height of each pane in pixels and not in %.

    <!DOCTYPE html>
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            // Script here
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div style="height:100%">
     
            <telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%"
                Skin="WebBlue" Width="100%" LiveResize="True">
                <telerik:RadPane ID="RadPane1" Runat="server" Width="30%" Height="300px"
                    ContentUrl="http://activeminds.ca" Scrolling="None">
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" Runat="server">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane2" Runat="server">
                    Test content
                </telerik:RadPane>
            </telerik:RadSplitter>
     
        </div>
        </form>
    </body>
    </html>
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 03 Mar 2014 Link to this post

    Hello David,

    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). This includes the html, body and  form elements - setting the following CSS will fix the issue with the provided configuration:
        html, body, form
        {
            width:100%;
            height:100%;
            padding:0;
            margin:0;
            overflow:hidden;
        }

    You can find useful information on the subject in the following online resources:
        Filling the Entire Page
        Specifying Size
        Resize with Window

    Kind regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    2 posts
    Member since:
    Feb 2014

    Posted 03 Mar 2014 in reply to Vessy Link to this post

    Thank you.  I will soon get more familiar with where to find the documentation I need. :D
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 04 Mar 2014 Link to this post

    Hi David,

    I am sure you will :) In the meantime, please, feel free to contact us in case any further questions appear.

    Kind regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top