Use full window height

[jammerhund]

Question

Hi,

i try to build a simple layout with a mainarea and a small statearea on bottom of the browser window. The mainarea should use the full height of the window. But it does only use the height of the ui.label('Mainarea'). How can i do this?

from nicegui import ui

with ui.row().classes('border full-width full-height'):
    ui.label('Mainarea')

with ui.row().classes('border full-width'):
    ui.label('Statearea')

ui.run()

[rodja]

Do you know about ui.footer?
https://nicegui.io/documentation/page_layout

[falkoschindler]

Hi @jammerhund,

"Full width" and "full height" usually refer to the size of the parent container. In case of your rows, there is no container except of the web page itself. And since a web page has basically infinite (or undefined) height, setting an element's height to "full" (or 100%) has no effect. But we can introduce a container, like the ui.column in the following example, with a specific height of calc(100vh-2rem) This starts with 100vh, with "vh" being 1% of the height of the view port, and subtracts 2rem to compensate for the page padding:

with ui.column().classes('border w-full h-[calc(100vh-2rem)]'):
    with ui.row().classes('border w-full h-full'):
        ui.label('main area')
    with ui.row().classes('border w-full'):
        ui.label('state area')

Last but not least, letting the main area grow to full height automatically leaves enough space for the state area.

By the way, I'm using Tailwind classes "w-*" and "h-*" here for their flexibility when it comes to custom values.

See #3079 (comment) for a similar discussion.

[v479038280]

ui.context.client.page_container.default_slot.children[0].props(
    ''':style-fn="(offset, height) => ( { height: offset ? `calc(100vh - ${offset}px)` : '100vh' })"'''
)
ui.context.client.content.classes("h-full")

if this one is better

[falkoschindler]

Great solution, @v479038280! I haven't thought of this approach.
This solution feels a bit more complicated, but works better than mine. If you, e.g., add a ui.header, the style fucntion still yields the correct page height. In my example, on the other hand, you would need to adjust the "2rem" to compensate the additional header.

[falkoschindler]

Slightly more compact:

ui.context.client.page_container.default_slot.children[0].props(':style-fn="o => ({ height: `calc(100vh - ${o}px)` })"')
ui.context.client.content.classes('h-full')

Documentation for style-fn: https://quasar.dev/layout/page#style-fn