How can I make a layout widget expand to full height in w2ui?

Question

I'm trying out a relatively new JavaScript/jQuery UI library, w2ui. I've got a layout working in my LAMP application, but I am wondering how to make the layout div take the full height of the screen. Here's a demo of a resizable layout from the official site.

Here is the HTML div which will become my layout container:

<div
    id="layout"
    style="width: 100%; height: 600px; margin-bottom: 10px;"
></div>

That works with '600px' as a height, but not '100%', which makes it invisible.

And the JavaScript (a few bits removed just for brevity):

    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;';
    $('#layout').w2layout({
        name: 'layout',
        panels: [
            { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' },
            {
                type: 'left', size: 800, resizable: true, style: pstyle, content: 'tab1'
            },
            { type: 'main', style: pstyle, content: 'main' },
            { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' }
        ]
    });

The layout docs don't mention setting a % height, though it's early days! Perhaps this question will act as a prompt.

One solution would be to read the Y dimension of the top of the layout, and then subtract this from the screen height, and then create the layout of that height. That would probably work, but if the screen resized I'd have to recalculate and reset the height, which is a bit hacky.

score 3 · Accepted Answer · edited May 23 '17 at 12:22

Here's the hacky solution, which I'll use for now; however, a better one would be worth working towards. To be fair, this works excellently in Firefox/OSX, and so is fine whilst I am in a development phase.

New HTML:

    <!-- Here's the panel system -->
    <div id="layout-container" style="height:700px;">
        <div id="layout" style="width: 100%; height: 100%;"></div>
    </div>

Additional JavaScript, executed prior to the code in the question (props to this answer for the resize stuff):

function setLayoutContainerHeight()
{
    // Get top position of layout container, subtract from screen height, subtract a bit for padding
    var y = $('#layout-container').position().top;
    var layoutHeight = $(window).height() - y - 10;
    $('#layout-container').css('height', layoutHeight + 'px');      
}

// Whenever the window changes size, recalculate the layout container height
setLayoutContainerHeight();
$(window).resize(setLayoutContainerHeight);

Update: the author this library has very kindly offered several ways to achieve a full-height layout, all of which are better than my hack!

How can I make a layout widget expand to full height in w2ui?

1 Answers1