Can Modena vertically align containers?

[pholding]

Hi

Does the Modena layout library provide any capability to vertically align two Containers without manually adding EmptyBoxes so that the containers are the same height? For example I'm using the following code two render two containers that normally sit side-by-side.

Code: Select all

<div class="Container50">
    <div class="ContainerIndent">
        <div class="Card ShadowEffect">
            <div class="TexAlCenter">
                <h2>Session Info</h2>
            </div>
            <div class="EmptyBox10"></div>
                <ul>
                    <!-- Multiple li tags omitted -->
                </ul>
            <div class="EmptyBox10"></div>
        </div>
    </div>
</div>

<div class="Container50">
    <div class="ContainerIndent">
        <div class="Card ShadowEffect">
            <div class="TexAlCenter">
                <h2>Request Info</h2>
            </div>
            <div class="EmptyBox10"></div>
            <ul>
                <!-- Multiple li tags omitted -->			
            </ul>
            <div class="EmptyBox10"></div>
        </div>
    </div>
</div>

This results in the following being rendered in the browser. I've added the dotted red line to indicate how the containers should be aligned.


Kind Regards

Paul

[daytona]

Hi,

We have not support for this feature at our layouts with CSS. Because there are technical and user based limitations for this.

Maybe, you can use third party javascript library solutions, for example;
http://tsvensen.github.io/equalize.js/ and here is an example for this http://jsfiddle.net/4QTNP/3/
or
https://css-tricks.com/snippets/jquery/ ... s-of-divs/

Kind regards,

Cem

[cagatay.civici]

PrimeFaces Grid CSS can do this though using css flex option, heights are same.

http://www.primefaces.org/showcase/ui/panel/grid.xhtml

http://www.w3schools.com/cssref/css3_pr_flex.asp

[rafael.simoes]

Is it possible add support for Flex in modena css ?
I see this support in Volt (http://www.primefaces.org/volt/docs/core/flex.xhtml), Titan (http://www.primefaces.org/titan/docs/core/flex.xhtml) Atlas (http://www.primefaces.org/atlas/docs/core/flex.xhtml) and Olympo (http://www.primefaces.org/olympos/docs/core/flex.xhtml).