UI doesn't look good inside a tab panel

[youyou015]

Description

Test code:

from nicegui import app, ui, native_mode

app.native.start_args["debug"] = True

# Normal
ui.label("First tab")
ui.label("First tab")
ui.separator()
ui.label("First tab")
ui.button("test1")
ui.button("test2")
ui.separator()
ui.button("test3")

# Not looks good in tabs
with ui.tabs().classes("w-full") as tabs:
    one = ui.tab("One")
    two = ui.tab("Two")
with ui.tab_panels(tabs, value=one).classes("w-full"):
    with ui.tab_panel(one):
        ui.label("First tab")
        ui.label("First tab")
        ui.separator()
        ui.label("First tab")
        ui.button("test1")
        ui.button("test2")
        ui.separator()
        ui.button("test3")
    with ui.tab_panel(two):
        ui.label("Second tab")

ui.run(
    native=True,
    reload=True,
    title="test",
    host="127.0.0.1",
    port=native_mode.find_open_port(),
)

Running result:

Btw, really love this UI framework! 👍

[natankeddem]

Is using ui.column an acceptable solution?

from nicegui import app, native_mode, ui

app.native.start_args["debug"] = True

# Normal
ui.label("First tab")
ui.label("First tab")
ui.separator()
ui.label("First tab")
ui.button("test1")
ui.button("test2")
ui.separator()
ui.button("test3")

# Not looks good in tabs
with ui.tabs().classes("w-full") as tabs:
    one = ui.tab("One")
    two = ui.tab("Two")
with ui.tab_panels(tabs, value=one).classes("w-full"):
    with ui.tab_panel(one):
        with ui.column():
            ui.label("First tab")
            ui.label("First tab")
            ui.separator()
            ui.label("First tab")
            ui.button("test1")
            ui.button("test2")
            ui.separator()
            ui.button("test3")
    with ui.tab_panel(two):
        with ui.column():
            ui.label("Second tab")

ui.run()

[rodja]

@natankeddem thanks for pointing out the work around. I think we should still fix the underlying issue in the next release.

[youyou015]

Is using ui.column an acceptable solution?

from nicegui import app, native_mode, ui

app.native.start_args["debug"] = True

# Normal
ui.label("First tab")
ui.label("First tab")
ui.separator()
ui.label("First tab")
ui.button("test1")
ui.button("test2")
ui.separator()
ui.button("test3")

# Not looks good in tabs
with ui.tabs().classes("w-full") as tabs:
    one = ui.tab("One")
    two = ui.tab("Two")
with ui.tab_panels(tabs, value=one).classes("w-full"):
    with ui.tab_panel(one):
        with ui.column():
            ui.label("First tab")
            ui.label("First tab")
            ui.separator()
            ui.label("First tab")
            ui.button("test1")
            ui.button("test2")
            ui.separator()
            ui.button("test3")
    with ui.tab_panel(two):
        with ui.column():
            ui.label("Second tab")

ui.run()

@natankeddem That works, thanks a lot!

[natankeddem]

@natankeddem thanks for pointing out the work around. I think we should still fix the underlying issue in the next release.

I wasn't sure if this was a bug. When I saw this behavior assumed using a ui.tab_panel should give undefined layout? The standard page container without a wrapper acts similarly a ui.column by default. I guess ui.tab_panel acting the same makes sense.

[falkoschindler]

In my point of view this is not a bug.

Not every element opens a flexbox container with gaps and padding, see ui.dialog or ui.tooltip for example. We chose to do it for the main page container and - of course - for layout elements like ui.row and ui.column. A bit more controversial was ui.card (#726), where we do add gaps and padding, but which deviates from QCard's default dehavior. And we introduced ui.query to simplify the removal of the page padding for everyone who doesn't want it.

So I don't think it is reasonable to make every container a flexbox. But sure, it might be better for ui.tab_panel. Since a tab is very similar to the page container, it indeed makes sense to render it equally by default.

While thinking about elements that should render similar to a plain page, I noticed that ui.left_drawer and ui.right_drawer are no flexboxes, even though ui.header and ui.footer are. But I think drawers should render like columns as well.

Long story short, my proposal:

1. Change the default layout of ui.tab_panel to be equal to ui.column.
2. Change the default layout of left and right drawers as well.

But since these are breaking changes, we should schedule it for 1.4.

[falkoschindler]

We should also think about using flex layout in ui.stepper: #1788