Create a WebSpliiter screen similar to Online Documentation

105

mikez posted over 14 years ago

I am trying to create a page that expands/resizes to the full height of the browser window similar to the Infragistics Online Documentation for 2010.1.

I have read through all height posts since 2008. I have googled for solutions with the "html, body" using css and for javascript "onresize" solutions. Every solution since 2008 in this forum is different and so is every goggled solution. They all seem to require css or javascript or both.

I have used NetAdvantage since 2004. Now we are moved to the Akido controls trying to get just the basics for the UI working is proving frustrating. I am will to invest the time in css if that is what it takes.

But, there needs to be several supported and documented examples for using the splitter with and without a master page to mimic the Infragistics Online Documentation for 2010.1 that work in at least IE7, IE8 and FireFox.

thanks
mikez

Parents

No Data

Reply

24497

Suggested Answer
[Infragistics] Viktor Snezhko posted over 14 years ago

Hi Mikez,

I think you are not aware, that under DOCTYPE XHTML, default heights of all html elements are collapsed. So, in order to stretch an element to height of browser, you should define heights of all its containers. That includes not only possible div wrapper, but also form, body and html elements as well. Below is example. I suggest you to experiment with different elements, maybe some heights should be slightly reduced from 100%. Also some browsers may have default values for margins, which can be removed as well. For example, in IE it can be body.left/top/right/bottomMargin.

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head runat="server">
    <title></title>
</head>
<body style="height:100%" leftmargin="0" topmargin="0">
    <form id="form1" runat="server" style="height:100%">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div style="height:100%">
        <ig:WebSplitter ID="WebSplitter1" runat="server" Width="99.5%" Height="99.5%">
     <Panes>
      <ig:SplitterPane runat="server">
      </ig:SplitterPane>
      <ig:SplitterPane runat="server">
      </ig:SplitterPane>
     </Panes>
     </ig:WebSplitter>
        </div>
    </form>
</body>
</html>
Cancel
Reply

Reject Answer

Cancel

Children

105

Offline mikez posted over 14 years ago in reply to [Infragistics] Viktor Snezhko

Victor,

This is what ultimately worked. Adding height to the "form" was key. Also these lines show as not valid in VS2008.

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%"> (style is not valid)
<body style="height:100%" leftmargin="0" topmargin="0"> (leftmargin topmargin are not valid)

But, my original comment is still valid. The code you showed help me to get a working starting point, the code as written did not work. It would save a huge amount of time for your customers and your tech staff if there were some basic examples that could be copied, pasted and guaranteed to work.

While I am sure there may be css purists that will have an issue with my example but that is the best I could do for now. It took tips grom at least 20 different searches to get this far. Since the new Akido controls are heavily dependent on css plenty of examples would help considerably.

Thanks again for the tips.

Example below tested in IE8 only. There will sure to be needed tweaks for IE7, FF & Opera.

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
   <title>SplitterTest</title>
        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                border: none;
                height: 100%;
                overflow: hidden; /* this hides the scroll bar */
            }

            form {
                height: 100%;
            }

            #wrapperDiv {
                height:100%;
            }

            #WebSplitter1 {
                height:99%;
                width:99.5%;
            }

        </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="wrapperDiv">
            <ig:WebSplitter ID="WebSplitter1" runat="server" BorderStyle="Solid"
                BorderWidth="3px" Orientation="Horizontal">
                <Panes>
                    <ig:SplitterPane runat="server" ScrollBars="Hidden"
                       Locked="True" Size="80px">
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server"
                       ScrollBars="Hidden" Size="100%">
                        <Template>
                            <ig:WebSplitter ID="WebSplitter1_vert1_4" runat="server" Height="100%">
                                <Panes>
                                    <ig:SplitterPane runat="server"
                                        CollapsedDirection="PreviousPane" Size="300px">
                                    </ig:SplitterPane>
                                    <ig:SplitterPane runat="server"
                                        Size="100%">
                                    </ig:SplitterPane>
                                </Panes>
                            </ig:WebSplitter>
                        </Template>
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server" Locked="True"
                       ScrollBars="Hidden" Size="30px">
                    </ig:SplitterPane>
                </Panes>
            </ig:WebSplitter>
       </div>
    </form>
</body>
</html>

html xmlns="http://www.w3.org/1999/xhtml">
   <title>SplitterTest</title>
        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                border: none;
                height: 100%;
                overflow: hidden; /* this hides the scroll bar */
            }

            form {
                height: 100%;
            }

            #wrapperDiv {
                height:100%;
            }

            #WebSplitter1 {
                height:99%;
                width:99.5%;
            }

        </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="wrapperDiv">
            <ig:WebSplitter ID="WebSplitter1" runat="server" BorderStyle="Solid"
                BorderWidth="3px" Orientation="Horizontal">
                <Panes>
                    <ig:SplitterPane runat="server" ScrollBars="Hidden"
                       Locked="True" Size="80px">
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server"
                       ScrollBars="Hidden" Size="100%">
                        <Template>
                            <ig:WebSplitter ID="WebSplitter1_vert1_4" runat="server" Height="100%">
                                <Panes>
                                    <ig:SplitterPane runat="server"
                                        CollapsedDirection="PreviousPane" Size="300px">
                                    </ig:SplitterPane>
                                    <ig:SplitterPane runat="server"
                                        Size="100%">
                                    </ig:SplitterPane>
                                </Panes>
                            </ig:WebSplitter>
                        </Template>
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server" Locked="True"
                       ScrollBars="Hidden" Size="30px">
                    </ig:SplitterPane>
                </Panes>
            </ig:WebSplitter>
       </div>
    </form>
</body>
</html>

html xmlns="http://www.w3.org/1999/xhtml">
   <title>SplitterTest</title>
        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                border: none;
                height: 100%;
                overflow: hidden; /* this hides the scroll bar */
            }

            form {
                height: 100%;
            }

            #wrapperDiv {
                height:100%;
            }

            #WebSplitter1 {
                height:99%;
                width:99.5%;
            }

        </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="wrapperDiv">
            <ig:WebSplitter ID="WebSplitter1" runat="server" BorderStyle="Solid"
                BorderWidth="3px" Orientation="Horizontal">
                <Panes>
                    <ig:SplitterPane runat="server" ScrollBars="Hidden"
                       Locked="True" Size="80px">
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server"
                       ScrollBars="Hidden" Size="100%">
                        <Template>
                            <ig:WebSplitter ID="WebSplitter1_vert1_4" runat="server" Height="100%">
                                <Panes>
                                    <ig:SplitterPane runat="server"
                                        CollapsedDirection="PreviousPane" Size="300px">
                                    </ig:SplitterPane>
                                    <ig:SplitterPane runat="server"
                                        Size="100%">
                                    </ig:SplitterPane>
                                </Panes>
                            </ig:WebSplitter>
                        </Template>
                    </ig:SplitterPane>
                    <ig:SplitterPane runat="server" Locked="True"
                       ScrollBars="Hidden" Size="30px">
                    </ig:SplitterPane>
                </Panes>
            </ig:WebSplitter>
       </div>
    </form>
</body>
</html>
Cancel
Reply

Cancel