NiceGUI соответствует высоте и ширине веб-страницы ⇐ Html

[Anonymous]

В следующем скрипте я хотел бы знать, почему после запуска скрипта появляется горизонтальная и вертикальная прокрутка. Я стараюсь, чтобы все виджеты вписывались в веб-страницу и не превышали ее размер. Вот мой скрипт:

Код: Выделить всё

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')

Спасибо команде поддержки

Подробнее здесь: https://stackoverflow.com/questions/798 ... a-web-page