Looking for an Infragistic component that helps with page setting

alain posted over 16 years ago

Good day.

I'm designing a website that is developped mainly with infragistic component.

the web page have 3 rows (header, main_body, footer), I'm trying to have the header stays on top of the window and the footer on the bottom, despite the size of the main-body (which have higher height and width than the user window).

I manage to make it work for IE7 and Firefox using CSS and the propriety : position:fixed, for the header and footer.

The probleme is that the "position:fixed" is not understand by IE6, I've tried several other solution and tricks to make it work but it seems that it can be done with CSS alone.

So what i'm asking :

Is there any Infragistic components that could help me with this problem ?

Thank you for your time.

Parents

No Data

Reply

746459

Craig Shoemaker posted over 16 years ago

Dexe:

I think a WebSplitter might be able to help you.

If you create a splitter and lock the top and bottom panes then you can achieve what you are looking for.

Here's the code of a sample I put together for you:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html,body,form
        {
        	height:100%;
        }
        .tallElement
        {
        	height:100%;
        }
        .noDisplay
        {
        	display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <cc1:WebSplitter SplitterBar-CssClass="noDisplay"
        BorderStyle="None"
        Orientation="Horizontal" 
        CssClass="tallElement" 
        ID="WebSplitter1" 
        runat="server" 
        Height="100%" 
        Width="100%">
        <panes>
            <cc1:SplitterPane 
                BorderStyle="None" 
                BorderWidth="0" 
                Locked="True" 
                MaxSize="100px" 
                MinSize="100px" 
                ScrollBars="Hidden" 
                runat="server" 
                Size="100px">
                <Template>
                    header
                </Template>
            </cc1:SplitterPane>
            <cc1:SplitterPane
                BorderStyle="None" 
                BorderWidth="0"
                Locked="true"
                runat="server">
                <Template>
                    <div style="height:1000px;background-color:#ccc;">lots of content</div>
                </Template>
            </cc1:SplitterPane>
            <cc1:SplitterPane
                BorderStyle="None" 
                BorderWidth="0" 
                Locked="True" 
                MaxSize="100px" 
                MinSize="100px" 
                ScrollBars="Hidden" 
                runat="server" 
                Size="100px">
                <Template>
                    footer
                </Template>
            </cc1:SplitterPane>
        </panes>
    </cc1:WebSplitter>
   
    </form>
</body>
</html>

HTH,

Craig

Children

No Data