NiceGUI Fits with Hight and Width of a Web Page

Question

In following Python script I would like to know why horizontal and vertical scroll appear after the script run. I try all widgets just fit into a web page not exceed the page size. Here is my script:

from nicegui import *

with ui.element().classes('grid grid-cols-[210px_250px_auto] gap-3 p-3 h-screen w-screen'):
    
    # COLUMN 1 — THUMBNAIL PANEL (only this scrolls)
    
    with ui.card().classes('h-full overflow-y-auto p-4'):
        ui.button('Load DICOM Images')
        thumbnail_panel = ui.column()


    # COLUMN 2 — TOOLS PANEL (fixed height, no scrolling)
    
    with ui.card().classes('h-full overflow-hidden flex flex-col gap-4 p-3'):
   
        # ---- First group (sliders, buttons) ----
        with ui.element().classes('flex flex-col gap-3'):
            ui.button('QA Mode')

            # slider_ww = ui.slider(min=1, max=5000, value=300)
            slider_ww = ui.slider(min=1, max=5000, value=300).classes('max-h-[36px]')
            ww_label = ui.label(f'WindowWidth: {slider_ww.value:.2f}') 

            # slider_wc = ui.slider(min=1, max=5000, value=150)
            slider_wc = ui.slider(min=1, max=5000, value=150).classes('max-h-[36px]')
            wc_label = ui.label(f'WindowWidth: {slider_wc.value:.2f}')

            with ui.row():
                ui.button('Zoom In')
                ui.button('Zoom Out')

        # ---- Second group under it ----
        with ui.card().classes('p-3'):
            ui.button("CW Rotation")
    
    # COLUMN 3 — BIG IMAGE VIEW AREA
        
    with ui.card().classes('h-full flex items-center justify-center'):
        image_view = ui.image().classes('max-w-full max-h-full')
    

ui.run(reload=False,show=True,title='Simple Image Viewer')

Thanks to support team

Falko · Accepted Answer · 2025-11-19 20:09:25Z

1

By adding h-screen to your grid, it will take as much height as the "screen". But this doesn't account for padding, which is usually 2x 1rem.

You can use h-[calc(100vh-2rem)] instead and the scrollbar is gone.

answered Nov 19 at 20:09

Falko

18.2k14 gold badges65 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammad Eftekharian Nov 20 at 5:41

Thanks Falko At last your method for following script makes scrollbar disappeared. Here is the proper format to disappear scrollbar: with ui.element().classes('grid grid-cols-[210px_250px_auto] gap-3 p-3 h-[calc(100vh-2rem)]'): Dear Falko, I would appreciate, if you let me know, is there any documents except what you provide in nicegui.io that explain niceGUI syntax in detail? Thank you again for your reply

Falko Nov 20 at 8:46

h-[...] is Tailwind syntax and calc(100vh-2rem) is CSS syntax.

Collectives™ on Stack Overflow

NiceGUI Fits with Hight and Width of a Web Page

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related