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>