radplitter width cannot resize to 100%

3 posts, 0 answers
  1. Johann
    Johann avatar
    2 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    Hi

    I am using the <telerik:RadSplitter> however I cannot get it to resize the width properly to 100%.

    I have the following :-

    <body>
           <header>this is the header</header>
            <div id="body">
                <section class="content-wrapper main-content clear-fix">
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" EnableViewState="false" LiveResize="True" BorderSize="0" CssClass="Splitter">
                        <telerik:RadPane ID="RadPane1" runat="server" Width="311" BackColor="#ffffff" CssClass="Splitter">
                            <uc1:UCMainMenu ID="UCMainMenu1" runat="server" />
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward" >
                        </telerik:RadSplitBar>
                        <telerik:RadPane ID="Pane2" runat="server" BackColor="#FFFFFF" CssClass="Splitter">
                            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </section>
            </div>
            <footer>this is the footer</footer>
    </body>

    and my CSS is as follows :-

    html {
        background-color: #e2e2e2;
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #fff;
        color: #333;
        font-size: .85em;
        font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
        margin: 0;
        padding: 0;
    }

    form {
        margin: 0;
        padding: 0;
        height: 100%;  
    }

    /* main layout
    ----------------------------------------------------------*/
    .content-wrapper {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }

    #body {
        background-color: #efeeef;
        clear: both;
        padding-bottom: 35px;
        height: 100%;
        width: 100%;
    }

        .main-content {
            padding-left: 10px;
            padding-top: 30px;
            height: 100%;
            width: 100%;
            }


    header .content-wrapper {
        padding-top: 20px; 
    }


    .Splitter {
        height: 100% !important; 
        width: 100% !important; 
    }

    How can I get it to resize the width of the right pane to 100% of the screen?

    When I remove the radsplitter and put a normal asp.net control, everything works as its supposed to.

    Thanks

    Johann
  2.
  3. Vessy
    Admin
    Vessy avatar
    2322 posts

    Posted 25 Mar 2013 Link to this post

    Hi Johann,

    There main reason for the experienced behavior is connected with s known limitation with such rendering. The Splitter is wrapped inside a div >> section, but the div (#body) has other siblings (footer and header). This is why it cannot calculate properly its sizes and even if they are configured to take 100% of the size of their parents.

    If the additional elements are direct siblings to the Splitter, you could extract their size from its, by configuring its HeightOffset property.

    Another thing which is highly recommended, is to set the Splitter/Panes width and height values, through the respective Height and Width properties (not with CSS styles).

    I could suggest you the following ways to achieve the described scenario:
    • Remove the elements, which are wrapping the Splitter ( <div id="body"> and <section>) so the extra size could be subtracted from the Splitter's height, using its OffsetHeight property. Note, that if there are margins/paddings to the Splitter's parent element, they also should be substracted through the same property.
    • Add an additional Splitter, which is wrapping the content of the whole page, and the data from the footer/deader/section are distributed to three RadPanes inside it.
    • Calculate manually the size of the <div id="body"> with JavaScript, so the Splitter will be able to calculate its size properly with the current rendering.

    For your convenience I am attaching a page, demonstrating the first approach, so you could examine it on your side. Note, that it demonstrates only the right way to configure the Splitter and the CSS styles of the removed elements are not applied.

    I believe you might find useful information also in the following online resources:
        Specifying Size
        Filling the Entire Page
        Resize with Window
      

    Regards,
    Vesi
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Gokul
    Gokul avatar
    11 posts
    Member since:
    Apr 2013

    Posted 02 May 2013 Link to this post

    hi,
      have u tried splitter width using PIXEL,if percentage is not supported try with pixel ,i think so it work ...........
                                                                                or
      use MEDIA QUERIES it will fix with screen and adjust size autoamtically acording to the size of the device ..............\
        
                THANKS 
Back to Top