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

different behaviours in radplitter height between Firefox and Chrome

5 Answers 49 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
App
Top achievements
Rank 1
App asked on 03 Apr 2013, 01:03 PM
Dear All,

I have the following code attached with this post, and for some reason, in Firefox and IE it looks good, ie no scrollbars and height is 100%, however in Chrome, I am getting a scrollbar, and cannot set the height properly to 100%.

My code is as follows, however I can provide a zip of the page if needed :-

<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">     
          <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>  
    <webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
    
<style type="text/css">
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;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}


    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* Header*/
header {
    padding-bottom: 5px;
    position: relative;
}

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

.radSplitterCss {
    height: 100% !important;
    margin: 0;
}

.radLeftPane {
    height: 100%;
    padding-left: 5px;
}

.radSplitBar {
    height: 100%;
}

.radRightPane {
    height: 100% !important;
    width: 79%; 
    padding-left: 5px;
}

.mainContent {
    width: 98%;
    text-align: justify;
}


#body {
    background-color: #ffffff;
    clear: both;
    padding-bottom: 35px;
}
    
footer {
    clear: both;
    font-size: .8em;
    height: 60px;
    border-top: 1px solid #D5D5D5;
}

</style>

</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
        <header>
            <div class="content-wrapper">
                header
             </div>
        </header>
    <div id="body">
        <section class="content-wrapper main-content clear-fix">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" BorderSize="0"
                Width="100%" Height="100%" Orientation="Vertical" CssClass="radSplitterCss" HeightOffset="30">
                <telerik:RadPane ID="RadPane2" runat="server" Width="15%" Height="100%" BackColor="white"
                    MinWidth="315" CssClass="radLeftPane">
                    This is the left pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar2" runat="server" Width="1%" CollapseMode="Forward" CssClass="radSplitBar" >
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane3" runat="server" BackColor="white" CssClass="radRightPane" >
                    <asp:UpdatePanel runat="server" ID="UPContent">
                        <ContentTemplate>
                            <div class="mainContent">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sapien vel libero congue hendrerit at vel leo. Vivamus convallis enim sed leo hendrerit at posuere dui tristique. Donec lorem magna, aliquam sit amet feugiat sed, viverra a ligula. Sed gravida, nulla sed egestas faucibus, dui justo aliquam ligula, pellentesque facilisis justo turpis tristique felis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ante ipsum, lobortis vel facilisis eu, sodales eget nibh. Aenean vehicula, tellus vitae elementum malesuada, justo nulla vestibulum ipsum, condimentum dapibus augue est nec diam. Pellentesque volutpat turpis et velit viverra in sodales metus euismod. Duis in leo eget justo bibendum mattis eu eget lectus. Integer odio enim, eleifend eget ullamcorper eu, sodales id lacus. Maecenas malesuada malesuada dui, sit amet molestie dolor sollicitudin nec. Nunc a mauris leo, ut pellentesque nunc. Nullam sed augue nibh, eget feugiat risus. Nunc faucibus scelerisque felis, non sodales tortor sodales a. Nullam non mauris sem, id dictum mi.

                                Nunc quis eros a dui hendrerit condimentum et in nisl. In pretium nisi eu augue venenatis sit amet ultrices turpis suscipit. Pellentesque lacinia, leo eget eleifend faucibus, augue ligula vehicula lectus, sed vestibulum justo sapien id mi. In et erat nisl, ut suscipit metus. Morbi eu nulla at massa placerat tincidunt ac et mi. Suspendisse mattis condimentum tellus, nec elementum orci suscipit id. Maecenas sit amet magna ac mauris facilisis ornare sodales dictum felis. Pellentesque facilisis commodo ipsum, et malesuada nisi consequat et. Fusce laoreet sagittis hendrerit. Nunc ut metus risus. Fusce vulputate scelerisque tortor nec dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sodales scelerisque eleifend.

                                Aenean et erat purus. Donec ut quam sed ante mattis consequat ut at est. Sed viverra elit sed risus aliquam ac iaculis nibh euismod. Proin rutrum varius risus, at blandit urna venenatis ac. Nam consequat sollicitudin lobortis. Phasellus pharetra, nisi id dictum commodo, magna magna mollis sapien, vel accumsan sem nisi a ipsum. Phasellus venenatis scelerisque sem, vel mattis lectus auctor sit amet.

                                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium rutrum sem sed ultrices. Duis sit amet tortor et ligula luctus scelerisque in at magna. Ut consequat laoreet magna, et vehicula arcu sodales non. Proin nec sapien risus, sit amet pulvinar dolor. Aliquam erat volutpat. Mauris sit amet est sit amet est tristique feugiat eget vel mauris.

                                Cras facilisis viverra ipsum quis rutrum. Maecenas id dui vitae justo pellentesque consectetur fringilla eget felis. Duis hendrerit porta sapien, id scelerisque dolor ullamcorper vel. Cras ullamcorper mauris sed ligula dignissim sed luctus tellus lacinia. Quisque egestas neque nec mi porttitor vitae facilisis odio sollicitudin. Aliquam erat volutpat. Ut lacus leo, venenatis id placerat pellentesque, tempor sit amet justo. Duis eget venenatis justo. In gravida est in elit adipiscing adipiscing et vitae lacus.

                                <p></p>

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sapien vel libero congue hendrerit at vel leo. Vivamus convallis enim sed leo hendrerit at posuere dui tristique. Donec lorem magna, aliquam sit amet feugiat sed, viverra a ligula. Sed gravida, nulla sed egestas faucibus, dui justo aliquam ligula, pellentesque facilisis justo turpis tristique felis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ante ipsum, lobortis vel facilisis eu, sodales eget nibh. Aenean vehicula, tellus vitae elementum malesuada, justo nulla vestibulum ipsum, condimentum dapibus augue est nec diam. Pellentesque volutpat turpis et velit viverra in sodales metus euismod. Duis in leo eget justo bibendum mattis eu eget lectus. Integer odio enim, eleifend eget ullamcorper eu, sodales id lacus. Maecenas malesuada malesuada dui, sit amet molestie dolor sollicitudin nec. Nunc a mauris leo, ut pellentesque nunc. Nullam sed augue nibh, eget feugiat risus. Nunc faucibus scelerisque felis, non sodales tortor sodales a. Nullam non mauris sem, id dictum mi.

                                Nunc quis eros a dui hendrerit condimentum et in nisl. In pretium nisi eu augue venenatis sit amet ultrices turpis suscipit. Pellentesque lacinia, leo eget eleifend faucibus, augue ligula vehicula lectus, sed vestibulum justo sapien id mi. In et erat nisl, ut suscipit metus. Morbi eu nulla at massa placerat tincidunt ac et mi. Suspendisse mattis condimentum tellus, nec elementum orci suscipit id. Maecenas sit amet magna ac mauris facilisis ornare sodales dictum felis. Pellentesque facilisis commodo ipsum, et malesuada nisi consequat et. Fusce laoreet sagittis hendrerit. Nunc ut metus risus. Fusce vulputate scelerisque tortor nec dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sodales scelerisque eleifend.

                                Aenean et erat purus. Donec ut quam sed ante mattis consequat ut at est. Sed viverra elit sed risus aliquam ac iaculis nibh euismod. Proin rutrum varius risus, at blandit urna venenatis ac. Nam consequat sollicitudin lobortis. Phasellus pharetra, nisi id dictum commodo, magna magna mollis sapien, vel accumsan sem nisi a ipsum. Phasellus venenatis scelerisque sem, vel mattis lectus auctor sit amet.

                                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium rutrum sem sed ultrices. Duis sit amet tortor et ligula luctus scelerisque in at magna. Ut consequat laoreet magna, et vehicula arcu sodales non. Proin nec sapien risus, sit amet pulvinar dolor. Aliquam erat volutpat. Mauris sit amet est sit amet est tristique feugiat eget vel mauris.

                                Cras facilisis viverra ipsum quis rutrum. Maecenas id dui vitae justo pellentesque consectetur fringilla eget felis. Duis hendrerit porta sapien, id scelerisque dolor ullamcorper vel. Cras ullamcorper mauris sed ligula dignissim sed luctus tellus lacinia. Quisque egestas neque nec mi porttitor vitae facilisis odio sollicitudin. Aliquam erat volutpat. Ut lacus leo, venenatis id placerat pellentesque, tempor sit amet justo. Duis eget venenatis justo. In gravida est in elit adipiscing adipiscing et vitae lacus.

                                <p></p>

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sapien vel libero congue hendrerit at vel leo. Vivamus convallis enim sed leo hendrerit at posuere dui tristique. Donec lorem magna, aliquam sit amet feugiat sed, viverra a ligula. Sed gravida, nulla sed egestas faucibus, dui justo aliquam ligula, pellentesque facilisis justo turpis tristique felis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ante ipsum, lobortis vel facilisis eu, sodales eget nibh. Aenean vehicula, tellus vitae elementum malesuada, justo nulla vestibulum ipsum, condimentum dapibus augue est nec diam. Pellentesque volutpat turpis et velit viverra in sodales metus euismod. Duis in leo eget justo bibendum mattis eu eget lectus. Integer odio enim, eleifend eget ullamcorper eu, sodales id lacus. Maecenas malesuada malesuada dui, sit amet molestie dolor sollicitudin nec. Nunc a mauris leo, ut pellentesque nunc. Nullam sed augue nibh, eget feugiat risus. Nunc faucibus scelerisque felis, non sodales tortor sodales a. Nullam non mauris sem, id dictum mi.

                                Nunc quis eros a dui hendrerit condimentum et in nisl. In pretium nisi eu augue venenatis sit amet ultrices turpis suscipit. Pellentesque lacinia, leo eget eleifend faucibus, augue ligula vehicula lectus, sed vestibulum justo sapien id mi. In et erat nisl, ut suscipit metus. Morbi eu nulla at massa placerat tincidunt ac et mi. Suspendisse mattis condimentum tellus, nec elementum orci suscipit id. Maecenas sit amet magna ac mauris facilisis ornare sodales dictum felis. Pellentesque facilisis commodo ipsum, et malesuada nisi consequat et. Fusce laoreet sagittis hendrerit. Nunc ut metus risus. Fusce vulputate scelerisque tortor nec dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sodales scelerisque eleifend.

                                Aenean et erat purus. Donec ut quam sed ante mattis consequat ut at est. Sed viverra elit sed risus aliquam ac iaculis nibh euismod. Proin rutrum varius risus, at blandit urna venenatis ac. Nam consequat sollicitudin lobortis. Phasellus pharetra, nisi id dictum commodo, magna magna mollis sapien, vel accumsan sem nisi a ipsum. Phasellus venenatis scelerisque sem, vel mattis lectus auctor sit amet.

                                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium rutrum sem sed ultrices. Duis sit amet tortor et ligula luctus scelerisque in at magna. Ut consequat laoreet magna, et vehicula arcu sodales non. Proin nec sapien risus, sit amet pulvinar dolor. Aliquam erat volutpat. Mauris sit amet est sit amet est tristique feugiat eget vel mauris.

                                Cras facilisis viverra ipsum quis rutrum. Maecenas id dui vitae justo pellentesque consectetur fringilla eget felis. Duis hendrerit porta sapien, id scelerisque dolor ullamcorper vel. Cras ullamcorper mauris sed ligula dignissim sed luctus tellus lacinia. Quisque egestas neque nec mi porttitor vitae facilisis odio sollicitudin. Aliquam erat volutpat. Ut lacus leo, venenatis id placerat pellentesque, tempor sit amet justo. Duis eget venenatis justo. In gravida est in elit adipiscing adipiscing et vitae lacus.
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>        
                </telerik:RadPane>
            </telerik:RadSplitter>
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            This is the footer
        </div>
    </footer>
    </form>
</body>
</html>

Thanks for your help and time

5 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 04 Apr 2013, 12:44 PM
Hello,

In order to configure RadSplitter to utilize its Height property in percentage values you need to make sure that all its parent elements have set height, including HTML,BODY and FROM elements. Please review the following help article on the subject:
http://www.telerik.com/help/aspnet-ajax/splitter-layout-filling-page.html

In addition, while examining the provided page I noticed the following issues:
  1. RadSplitter and its child controls have CSS classes applied that have rule height: 100% !important - this is incorrect and will interfere with the controls correct behavior.
  2. RadSplitter's direct parents (<section> <div id='body'>) does not have set height - for the provided page layout, you need to manually calculate the size of the above mentioned elements, or you can remove them and set splitter's HeightOffset property to combined height of the <header> and <footer> elements.
  3. HTML, BODY and FORM elements does not have set size.

Could you please resolve the above issues and see if the problem still occurs?


Kind regards,
Dobromir
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.
0
App
Top achievements
Rank 1
answered on 04 Apr 2013, 01:53 PM
Hi Dobromir

I followed your advise, however I am still getting problems.

In Firefox and Explorer, I am getting a scrollbar at the end of the page, which I do not get when I do not set the 

html, body, form {
    height: 100%;
}

In Chrome, I am getting 2 scrollbars, one for the RadPanel content and one for the whole page.


Here is my new code:-

<style type="text/css">
html, body, form {
    height: 100%;
}
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;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}


    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* Header*/
header {
    padding-bottom: 5px;
    position: relative;
}

#headerContainer {
    height: 33px;
    background-position: 10px 2px;
    padding-top: 2px;
}


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

.radSplitterCss {
    height: 100%;
    margin: 0;
}

.radLeftPane {
    height: 100%;
    padding-left: 5px;
}

.radSplitBar {
    height: 100%;
}

.radRightPane {
    height: 100%;
    width: 79%; 
    padding-left: 5px;
}

.mainContent {
    width: 98%;
    text-align: justify;
}


#body {
    background-color: #ffffff;
    clear: both;
    padding-bottom: 35px;
}
    
footer {
    clear: both;
    font-size: .8em;
    height: 60px;
    border-top: 1px solid #D5D5D5;
}

</style>

</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
        <header>
            <div id="headerContainer">
                <div class="content-wrapper">
                    header
                 </div>
            </div>
        </header>
    <div id="body">
        <section class="content-wrapper main-content clear-fix">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" PanesBorderSize="0" BorderSize="0"
                Width="100%" Height="100%" Orientation="Vertical" CssClass="radSplitterCss" HeightOffset="100">
                <telerik:RadPane ID="RadPane2" runat="server" Width="15%" Height="100%" BackColor="white"
                    MinWidth="315" CssClass="radLeftPane">
                    This is the left pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar2" runat="server" Width="1%" CollapseMode="Forward" CssClass="radSplitBar" >
                </telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane3" runat="server" BackColor="white" CssClass="radRightPane" >
                    <asp:UpdatePanel runat="server" ID="UPContent">
                        <ContentTemplate>
                            <div class="mainContent">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sapien vel libero congue hendrerit at vel leo. Vivamus convallis enim sed leo hendrerit at posuere dui tristique. Donec lorem magna, aliquam sit amet feugiat sed, viverra a ligula. Sed gravida, nulla sed egestas faucibus, dui justo aliquam ligula, pellentesque facilisis justo turpis tristique felis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ante ipsum, lobortis vel facilisis eu, sodales eget nibh. Aenean vehicula, tellus vitae elementum malesuada, justo nulla vestibulum ipsum, condimentum dapibus augue est nec diam. Pellentesque volutpat turpis et velit viverra in sodales metus euismod. Duis in leo eget justo bibendum mattis eu eget lectus. Integer odio enim, eleifend eget ullamcorper eu, sodales id lacus. Maecenas malesuada malesuada dui, sit amet molestie dolor sollicitudin nec. Nunc a mauris leo, ut pellentesque nunc. Nullam sed augue nibh, eget feugiat risus. Nunc faucibus scelerisque felis, non sodales tortor sodales a. Nullam non mauris sem, id dictum mi.

                                Nunc quis eros a dui hendrerit condimentum et in nisl. In pretium nisi eu augue venenatis sit amet ultrices turpis suscipit. Pellentesque lacinia, leo eget eleifend faucibus, augue ligula vehicula lectus, sed vestibulum justo sapien id mi. In et erat nisl, ut suscipit metus. Morbi eu nulla at massa placerat tincidunt ac et mi. Suspendisse mattis condimentum tellus, nec elementum orci suscipit id. Maecenas sit amet magna ac mauris facilisis ornare sodales dictum felis. Pellentesque facilisis commodo ipsum, et malesuada nisi consequat et. Fusce laoreet sagittis hendrerit. Nunc ut metus risus. Fusce vulputate scelerisque tortor nec dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sodales scelerisque eleifend.

                                Aenean et erat purus. Donec ut quam sed ante mattis consequat ut at est. Sed viverra elit sed risus aliquam ac iaculis nibh euismod. Proin rutrum varius risus, at blandit urna venenatis ac. Nam consequat sollicitudin lobortis. Phasellus pharetra, nisi id dictum commodo, magna magna mollis sapien, vel accumsan sem nisi a ipsum. Phasellus venenatis scelerisque sem, vel mattis lectus auctor sit amet.

                                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium rutrum sem sed ultrices. Duis sit amet tortor et ligula luctus scelerisque in at magna. Ut consequat laoreet magna, et vehicula arcu sodales non. Proin nec sapien risus, sit amet pulvinar dolor. Aliquam erat volutpat. Mauris sit amet est sit amet est tristique feugiat eget vel mauris.

                                Cras facilisis viverra ipsum quis rutrum. Maecenas id dui vitae justo pellentesque consectetur fringilla eget felis. Duis hendrerit porta sapien, id scelerisque dolor ullamcorper vel. Cras ullamcorper mauris sed ligula dignissim sed luctus tellus lacinia. Quisque egestas neque nec mi porttitor vitae facilisis odio sollicitudin. Aliquam erat volutpat. Ut lacus leo, venenatis id placerat pellentesque, tempor sit amet justo. Duis eget venenatis justo. In gravida est in elit adipiscing adipiscing et vitae lacus.

                                <p></p>

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sapien vel libero congue hendrerit at vel leo. Vivamus convallis enim sed leo hendrerit at posuere dui tristique. Donec lorem magna, aliquam sit amet feugiat sed, viverra a ligula. Sed gravida, nulla sed egestas faucibus, dui justo aliquam ligula, pellentesque facilisis justo turpis tristique felis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ante ipsum, lobortis vel facilisis eu, sodales eget nibh. Aenean vehicula, tellus vitae elementum malesuada, justo nulla vestibulum ipsum, condimentum dapibus augue est nec diam. Pellentesque volutpat turpis et velit viverra in sodales metus euismod. Duis in leo eget justo bibendum mattis eu eget lectus. Integer odio enim, eleifend eget ullamcorper eu, sodales id lacus. Maecenas malesuada malesuada dui, sit amet molestie dolor sollicitudin nec. Nunc a mauris leo, ut pellentesque nunc. Nullam sed augue nibh, eget feugiat risus. Nunc faucibus scelerisque felis, non sodales tortor sodales a. Nullam non mauris sem, id dictum mi.

                                Nunc quis eros a dui hendrerit condimentum et in nisl. In pretium nisi eu augue venenatis sit amet ultrices turpis suscipit. Pellentesque lacinia, leo eget eleifend faucibus, augue ligula vehicula lectus, sed vestibulum justo sapien id mi. In et erat nisl, ut suscipit metus. Morbi eu nulla at massa placerat tincidunt ac et mi. Suspendisse mattis condimentum tellus, nec elementum orci suscipit id. Maecenas sit amet magna ac mauris facilisis ornare sodales dictum felis. Pellentesque facilisis commodo ipsum, et malesuada nisi consequat et. Fusce laoreet sagittis hendrerit. Nunc ut metus risus. Fusce vulputate scelerisque tortor nec dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sodales scelerisque eleifend.

                                Aenean et erat purus. Donec ut quam sed ante mattis consequat ut at est. Sed viverra elit sed risus aliquam ac iaculis nibh euismod. Proin rutrum varius risus, at blandit urna venenatis ac. Nam consequat sollicitudin lobortis. Phasellus pharetra, nisi id dictum commodo, magna magna mollis sapien, vel accumsan sem nisi a ipsum. Phasellus venenatis scelerisque sem, vel mattis lectus auctor sit amet.

                                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium rutrum sem sed ultrices. Duis sit amet tortor et ligula luctus scelerisque in at magna. Ut consequat laoreet magna, et vehicula arcu sodales non. Proin nec sapien risus, sit amet pulvinar dolor. Aliquam erat volutpat. Mauris sit amet est sit amet est tristique feugiat eget vel mauris.

                                Cras facilisis viverra ipsum quis rutrum. Maecenas id dui vitae justo pellentesque consectetur fringilla eget felis. Duis hendrerit porta sapien, id scelerisque dolor ullamcorper vel. Cras ullamcorper mauris sed ligula dignissim sed luctus tellus lacinia. Quisque egestas neque nec mi porttitor vitae facilisis odio sollicitudin. Aliquam erat volutpat. Ut lacus leo, venenatis id placerat pellentesque, tempor sit amet justo. Duis eget venenatis justo. In gravida est in elit adipiscing adipiscing et vitae lacus.

                                <p></p>

                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu sapien vel libero congue hendrerit at vel leo. Vivamus convallis enim sed leo hendrerit at posuere dui tristique. Donec lorem magna, aliquam sit amet feugiat sed, viverra a ligula. Sed gravida, nulla sed egestas faucibus, dui justo aliquam ligula, pellentesque facilisis justo turpis tristique felis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque ante ipsum, lobortis vel facilisis eu, sodales eget nibh. Aenean vehicula, tellus vitae elementum malesuada, justo nulla vestibulum ipsum, condimentum dapibus augue est nec diam. Pellentesque volutpat turpis et velit viverra in sodales metus euismod. Duis in leo eget justo bibendum mattis eu eget lectus. Integer odio enim, eleifend eget ullamcorper eu, sodales id lacus. Maecenas malesuada malesuada dui, sit amet molestie dolor sollicitudin nec. Nunc a mauris leo, ut pellentesque nunc. Nullam sed augue nibh, eget feugiat risus. Nunc faucibus scelerisque felis, non sodales tortor sodales a. Nullam non mauris sem, id dictum mi.

                                Nunc quis eros a dui hendrerit condimentum et in nisl. In pretium nisi eu augue venenatis sit amet ultrices turpis suscipit. Pellentesque lacinia, leo eget eleifend faucibus, augue ligula vehicula lectus, sed vestibulum justo sapien id mi. In et erat nisl, ut suscipit metus. Morbi eu nulla at massa placerat tincidunt ac et mi. Suspendisse mattis condimentum tellus, nec elementum orci suscipit id. Maecenas sit amet magna ac mauris facilisis ornare sodales dictum felis. Pellentesque facilisis commodo ipsum, et malesuada nisi consequat et. Fusce laoreet sagittis hendrerit. Nunc ut metus risus. Fusce vulputate scelerisque tortor nec dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sodales scelerisque eleifend.

                                Aenean et erat purus. Donec ut quam sed ante mattis consequat ut at est. Sed viverra elit sed risus aliquam ac iaculis nibh euismod. Proin rutrum varius risus, at blandit urna venenatis ac. Nam consequat sollicitudin lobortis. Phasellus pharetra, nisi id dictum commodo, magna magna mollis sapien, vel accumsan sem nisi a ipsum. Phasellus venenatis scelerisque sem, vel mattis lectus auctor sit amet.

                                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium rutrum sem sed ultrices. Duis sit amet tortor et ligula luctus scelerisque in at magna. Ut consequat laoreet magna, et vehicula arcu sodales non. Proin nec sapien risus, sit amet pulvinar dolor. Aliquam erat volutpat. Mauris sit amet est sit amet est tristique feugiat eget vel mauris.

                                Cras facilisis viverra ipsum quis rutrum. Maecenas id dui vitae justo pellentesque consectetur fringilla eget felis. Duis hendrerit porta sapien, id scelerisque dolor ullamcorper vel. Cras ullamcorper mauris sed ligula dignissim sed luctus tellus lacinia. Quisque egestas neque nec mi porttitor vitae facilisis odio sollicitudin. Aliquam erat volutpat. Ut lacus leo, venenatis id placerat pellentesque, tempor sit amet justo. Duis eget venenatis justo. In gravida est in elit adipiscing adipiscing et vitae lacus.
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>        
                </telerik:RadPane>
            </telerik:RadSplitter>
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            This is the footer
        </div>
    </footer>
    </form>
</body>
</html>

Thanks

Johann
0
Dobromir
Telerik team
answered on 05 Apr 2013, 06:48 AM
Hello,

Actually, the scrollbars appears because when the splitter initially calculate its size it may extend the page a bit. After that when it is sized according to the browser window the viewport is smaller, due to the already displayed scrollbars, and they do not disappear.

The recommended approach when configuring RadSplitter to fill the page is to disable the scrolling of the container (set overflow:hidden CSS rule) and leave the scrolling functionality to the splitter control. In this case, along with height:100% you should set overflow:hidden to the html,body,form selector, e.g.:
html, body, form {
    height: 100%;
    overflow: hidden;
}


Greetings,
Dobromir
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.
0
App
Top achievements
Rank 1
answered on 05 Apr 2013, 08:09 AM
Hi Dobromir

The problem with overflow:hidden is that when I display my page in a 1024x768 browser, and I have a lot of content that should extend the page vertically, I am not getting the scrollbar, and as so I cannot scroll the page vertically.
0
Vessy
Telerik team
answered on 08 Apr 2013, 02:06 PM
Hello,

I have reviewed the code provided in your previous reply, but I do not see the Dobromir's suggestions to be applied to it. Please, review his post one more time and try to apply the proposed modifications, since this is the only way to receive any consistence behavior of the control.

Additionally, please, correct me if i am wrong, but as long as I could understand from your last reply, you want the content of the page to exceed the view port size. If this is the case, I am afraid that this could not be done with the current percentages configuration. More detailed information on the subject is available in the following KB article: Initially Resize the RadSplitter according to its content

Regards,
Veselina Raykova
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.
Tags
Splitter
Asked by
App
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
App
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or