Prime Community Forum

Posted: **01 Sep 2015, 01:02**

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

Posted: **06 Sep 2015, 14:16**

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

Posted: **08 Sep 2015, 07:52**

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

Posted: **28 Apr 2016, 19:06**

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).

Prime Community Forum

Can Modena vertically align containers?

Can Modena vertically align containers?

Re: Can Modena vertically align containers?

Re: Can Modena vertically align containers?

Re: Can Modena vertically align containers?