Elastic layout

Discuss anything that's related to the Raxan framework

Elastic layout

Postby fc_enriqueism » Thu Oct 13, 2011 6:58 pm

Hi, again
I'm trying to build an elastic layout based in the example "Layout with left sidebar" on page http://raxanpdi.com/sdk/examples/exampl ... ss-elastic
Code: Select all
 <div class="column e100 last">
            <div class="e100 h10 lightgray last ">
               <h3 class="pad">Top</h3>
            </div>
            <div class="c10 r35 silver left front">
               <h3 class="pad">Menu (fixed-width)</h3>
            <div class="r35 prepend1 append1 scrollable">
                <div class="page-content master-content prepend1 append1"></div>
            </div>
        </div>

It works like a charm considering horizontal size, but I also need to be elastic in vertical size. In other way I need my layout to always full-fill the nav window. I dont find a conbination of css labels to di that. Thanks in advance.
fc_enriqueism
 
Posts: 10
Joined: Wed Sep 28, 2011 12:25 am

Re: Elastic layout

Postby raymond » Tue Oct 18, 2011 2:33 pm

Hi,

Sorry for the delay in responding.

To get an elastic height you need to add css class h100 to the <html> and <body> tags. You also need to add h100 to the navbar class. Here's the sample code:

Code: Select all
<html class="h100">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Your title here...</title>
        <link href="raxan/ui/css/master.css" type="text/css" rel="stylesheet" />
        <!--[if IE lt 8]><link rel="stylesheet" href="raxan/styles/master.ie.css" type="text/css"><![endif]-->
        <link href="raxan/ui/css/default/theme.css" type="text/css" rel="stylesheet" />
    </head>

    <body class="h100">
        <div class="column e100 h100 last ">
            <div class="e100 h10 lightgray last ">
               <h3 class="pad">Top</h3>
            </div>
            <div class="c10 h90 silver left front">
               <h3 class="pad">Menu (fixed-width)</h3>
                <div class="prepend1 append1 scrollable">
                    <div class="page-content master-content prepend1 append1">lorem</div>
                </div>
            </div>
        </div>
    </body>
</html>




Best regards,
__
Raymond
raymond
Site Admin
 
Posts: 215
Joined: Tue Mar 17, 2009 5:04 am


Return to General Discussions

Who is online

Users browsing this forum: No registered users and 1 guest

cron