scroll area height "h-full" make the scroll area gone?

[atticus-lv]

Question

I want the scroll area to auto fit the parent container, but seem it will only fit half height of it...How to make it fill parent? claasses('h-full') will make the area gone

video:

2024-05-16.01-12-00.mp4

code

from nicegui import ui

with ui.scroll_area().classes('w-full h-[500px]'):
    for i in range(0, 10):
        with ui.card().classes('w-[256px] h-[256px]'):
            ui.label(f'Card {i}')
            ui.button('Edit')
            ui.button('Delete')
            ui.button('Clone')

ui.run(native=True)

[atticus-lv]

I try classes('absolute fit inset-0') will give a smooth interface

However, it must be the most top container. Or it will overwrite others.

with ui.row().classes('w-full'):
    # search bar
    search = ui.input('Search').props('outlined')
    with search.add_slot('prepend'):
        ui.icon('search')
with ui.scroll_area().classes('absolute fit inset-0'):
    for i in range(0, 5):
        ui.label('test')

Any method to fix this?

[atticus-lv]

hi @rodja @falkoschindler ,can I get some help from you?

[falkoschindler]

Hi @atticus-lv,

"h-full" let's `ui.scroll_area" get the height from its parent container. But there is no such container. The page itself doesn't automatically fill the viewport, so it's height is 0 by default. If the scroll area uses this height as well, everything collapses to zero height.

You could use something like .classes('w-full h-[calc(100vh-2rem)]') to use 100% of the viewport minus 2rem for the padding. If there are other elements taking up some of the vertical space, you might want to force to page to fill the viewport before using "h-full" on the scroll area:

ui.context.client.content.classes('h-screen')

ui.label('Some text')
with ui.scroll_area().classes('w-full h-full'):
    for i in range(0, 10):
        with ui.card().classes('w-[256px] h-[256px]'):
            ui.label(f'Card {i}')
            ui.button('Edit')
            ui.button('Delete')
            ui.button('Clone')

[atticus-lv]

Thanks, that is a nice solution.

[atticus-lv]

But there is still a problem that when this scrollarea use with footer/header. It will show up the scroller of the pager, which make 2 scroll bar in this area. @falkoschindler
It that a way to hide the page scroller's bar or just make the header over on top of it? In that case I will not define my own scroll area

from nicegui import ui

ui.context.client.content.classes('h-screen')

with ui.header().classes(replace='row items-center pywebview-drag-region', ) as header:
    ui.button(icon='menu').props('flat color=white')

ui.label('Some text')
with ui.scroll_area().classes('w-full h-full'):
    for i in range(0, 10):
        with ui.card().classes('w-[256px] h-[256px]'):
            ui.label(f'Card {i}')
            ui.button('Edit')
            ui.button('Delete')
            ui.button('Clone')
ui.run(native=True)

[falkoschindler]

You somehow need to account for the header when setting the content height. One way is to simply subtract its height:

ui.context.client.content.classes('h-[calc(100vh-2rem)]')

But I found another alternative in this comment avoiding such magic numbers:

ui.query('.nicegui-content').classes('w-full')
ui.query('.q-page').classes('flex')