Question

I’m trying to use the built-in ui-grid in jquery mobile for a 3 column layout.

The problem are the ui-bars inside the ui-blocks when they have a different height. I’d like to have all 3 columns to have the same height as the highest column.

Does anyone know a simple solution to this problem? I’d like to solve it with just CSS but I didn’t manage it. Is JS really the only solution to this problem?

JsFiddle:
http://jsfiddle.net/zHbuC/466/

Code:

<div data-role="page" id="station" class="type-home">
    <div data-role="header"><h1>Header Page 1</h1></div>

    <div data-role="content" data-theme="b">
        <div class="ui-grid-b" style="text-align:center">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-c">A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-c">B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-c">
                    <p>B with alot of text</p>
                    <p>with lots of lines</p>
                    <p>another line</p>
                </div>
            </div>
        </div>
    </div>

    <div data-role="footer"><h4>Footer</h4></div>
</div>

Answer 1

In my experience the only “reliable” soloution is using a simple jquery height comparison. It only takes a couple of lines.

var tallest = 0;
$('.ui-grid-b > div').each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
$('.ui-grid-b .ui-bar').height(tallest);

Or do it as a function, see http://www.cssnewbie.com/equal-height-columns-with-jquery/

If you wan’t CSS on the other hand, there is a buggy/unrelaible method using the box-model.
See: http://www.css3.info/introducing-the-flexible-box-layout-module/

Else there are some HTML/CSS hacks, which work, but produce “ugly” code.
See: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

---

jQuery example:
http://jsfiddle.net/zHbuC/468/

And a minified example (only works if content is always in the .ui-bar)

var tallest = 0;
$('.ui-grid-b .ui-bar').each(function() {
    if($(this).height() > tallest) {tallest = $(this).height();}
}).height(tallest);