Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Dim
265
WebSplitter height issue
posted

Hallo,

WebSplitter calculates his own height wrong, if set it to 100%. He does not consider the height of another elements on the Page. Is there any another way to stretch the WebSplitter over the whole Page ?

Here is an example, please use styles defined here.

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>   
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }

        html, body, form
        {
            height: 100%;
            width: 100%;
            overflow: hidden;
            font-size: 12px;
            font-family: Verdana;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="content" style="height: 100%">
            <div style="display: block; height: 50px;">
                <p>I'm the placeholder with height = 50px</p>
                <p>WebSplitter on bottom to me calculates his height wrong, does not consider my height. So you can't see the bottom border of the WebSplitter.</p>
            </div>
            <ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%" Orientation="Vertical" DynamicResize="true">
                <Panes>
                    <ig:SplitterPane runat="server" BorderStyle="None" CollapsedDirection="NextPane"
                        ScrollBars="Hidden" Size="250px" EnableRelativeLayout="False">
                        <Template>
                            <div id="navLabel" class="navItem">
                                <p>
                                    Überschrift
                                </p>
                            </div>
                        </Template>
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server" ContentUrl="about:blank" BorderStyle="Solid" BorderWidth="5px" BorderColor="red" ScrollBars="Hidden">
                    </ig:SplitterPane>
                </Panes>
            </ig:WebSplitter>
        </div>
    </form>
</body>

Parents
No Data
Reply
  • 37874
    posted

    Hello pobo01,

    The behavior you are experiencing is expected, because you set overflow: hidden for html, body and form elements. If you remove this line from the styles, you will have a scrollbar and you will be able to scroll down and see the whole WebSplitter.

    Hope this helps.

Children