question about container

[Amitava Saha]

Hi, I've a question about Container. From the Documentation: "the only
thing you can’t do is having two containers overlapping each other."
Could you please explain the above statement with an example? Another
problem I'm having is that container div won't expand with the
children element. When I inspect container div, I see it's height is
0px. What could be the issue? Thanks for the excellent framework!

[Sergio de la Garza]

Hi Amitava,

The 2 overlaping containers thing is something like this:

<div class="unit">

<div class="container">

</div>

<div class="container">

</div>

</div>

You can not do that, there has to be only one container per 'unit, columns, column' classes.

Also you must do paddings, margins and borders to containers and not to unit, column(s) classes thats the only rule, example:

<div class="unit" style="background:#C0C0C0;">

<div class="container" style="padding:10px;margin:20px;border:1px solid #999;>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque dolor vel enim sagittis non tempus urna sagittis. In hac habitasse platea dictumst. Aliquam tincidunt velit vitae nunc scelerisque facilisis. Praesent consectetur justo eu sem adipiscing hendrerit. Proin vitae lectus ligula, sit amet ullamcorper urna. Mauris in tortor vel orci pulvinar dictum vitae nec quam. Phasellus lectus arcu, tristique et pellentesque at, ultricies ut nisi. Etiam hendrerit porta luctus.</p>

</div>

</div>

-- 
Sergio de la Garza
Sent with Sparrow

--
You received this message because you are subscribed to the Google Groups "Elastic CSS Framework" group.
To post to this group, send email to elastic-cs...@googlegroups.com.
To unsubscribe from this group, send email to elastic-css-fram...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/elastic-css-framework?hl=en.

[Amitava Saha]

Thank you for the explanation! I got it now.

[azendal]

this is the main case where it fails:

.columns > .container
         > .container

this is because elastic expects this kind of structure

.columns > .column
.columns > .container > .column

and does this only for the first container not all of them.


the other problem is very difficult to tell you what is going on unless you send me the code. it is supposed to work, .container has clearfix so the height should not be 0

[Amitava Saha]

Thank you. I fixed the other problem with .clearfix class. I have
another annoying issue. I have an elastic left column and two fixed
width columns at right. The page is pretty complex with lots of
elements.

<div class="unit">
<div class="container">

<h3 class="titlebar">Worklist</h3>
</div>
<div class="on-3 columns same-height">
<div class="elastic column">
<div id="mainContent" class="container">Tables etc goes in here</
div>
</div>
<div class="fixed column">
<span>Toggle rightSidebar button</span>
</div>
<div class="fixed column">
<div id="rightSidebar" class="container">Sidebar of 320px</div>
</div>
</div>
</div>

Now, the elastic column expands width once the page has been loaded
which I understand is due to the fact that elastic is calculating the
elastic column width once the document has been loaded. However, it is
visually very unpleasant and I have received complains about it. How
can I overcome this issue? One of the reasons I love Elasticss is that
I can use both elastic and fixed columns and elasticss takes care of
everything.

[azendal]

There are several questions to answer first.
Is your layout liquid or fixed?
do you know the width of your fixed columns?

if your layout is liquid elastic must get the width of the fixed columns and the width of the page to set the width of the elastic column
Possible solutions

• visibility hidden until elastic computes

If your layout is fixed and you know the widths of the columns

• load once with elastic, cache the width of the elastic column.

Other possible solutions include using faux columns first for a liquid layout and then go back to elastic (personally i don't like this one).

i usually use visibility hidden on body, and visibility = '' when elastic initializes

[Amitava Saha]

Thanks! That's a very good idea. Yes my layout is elastic. I tried that before posting the question but my layout looked messed up until I called refresh method today and everything looks perfect!

        $(document).ready(function () {
            $('body').hide();
            jQuery(document).bind('elastic:initialize', function () {
                $('body').show();
                Elastic.refresh();
            });
        });