scroll area height "h-full" make the scroll area gone? #3079
-
QuestionI 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? video: 2024-05-16.01-12-00.mp4code 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) |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
Beta Was this translation helpful? Give feedback.
-
hi @rodja @falkoschindler ,can I get some help from you? |
Beta Was this translation helpful? Give feedback.
-
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 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') |
Beta Was this translation helpful? Give feedback.
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: