Tabs menu alignment

[BattlemasterLoL]

Question

I'm working on a NiceGUI project with tabs. Some tab labels are longer than others, and I want them to align to the left for a cleaner look. I've tried adding classes like align-left or justify-start to the ui.tabs element, but it doesn't seem to work.

Additionally, my tab bar is positioned on the side. Is there a way to make it the full height of the page? Ideally, the tab content panels should also be the full height of the page.

Here is a base of the code

from nicegui import ui, app
with ui.splitter(value=15).classes('w-full h-full') as splitter:
    with splitter.before:
        with ui.tabs().props("vertical inline-label").classes("w-full h-full justify-start") as tabs:
            tab1 = ui.tab("Tab 1", icon="code")
            tab2 = ui.tab("Tab 2 long", icon="water_drop")
            tab3 = ui.tab("Tab 3", icon="healing")
    with splitter.after:
        with ui.tab_panels(tabs, value=tab1).classes("w-full h-full"):
            with ui.tab_panel(tab1).classes('w-full h-full'):
                with ui.column().classes("w-full items-center"):
                    ui.label("Tab Page 1")
            with ui.tab_panel(tab2).classes('w-full h-full'):
                with ui.column().classes("w-full items-center"):
                    ui.label("Tab Page 2")
            with ui.tab_panel(tab3).classes('w-full h-full'):
                with ui.column().classes("w-full items-center"):
                    ui.label("Tab Page 3")
ui.run(dark=True)

[falkoschindler]

Hi @BattlemasterLoL,

To left-align the tabs, you can justify the tabs (similar to #1248):

ui.tab(...).classes('justify-start')

To fill the vertical screen size, replace "h-full" (100% of the parent container) with "h-screen" (100% of the screen size). Because there is no parent container with a height constraint, "h-full" is ineffective here.
This will allow the page to scroll a little bit due to padding. You can either remove the padding like this:

ui.query('.nicegui-content').classes('p-0')

or subtract it from the screen size like this:

with ui.splitter(value=15).classes('w-full h-[calc(100vh-2rem)]') as splitter:

[BattlemasterLoL]

After some more tweaking with it I have across another way that seems to work better. By modifying the ui.query() and adding a second you can change it to a flex class and give the ui.splitter(), ui.tab(), and ui.tab_panels() a "h-full" class. Here is the updated code as a template for those who want:

from nicegui import ui, app

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

with ui.splitter(value=15).classes('w-full h-full') as splitter:
    with splitter.before:
        with ui.tabs().props("vertical inline-label").classes("w-full h-full") as tabs:
            tab1 = ui.tab("Tab 1", icon="code").classes('justify-start')
            tab2 = ui.tab("Tab 2 long", icon="water_drop").classes(
                'justify-start')
            tab3 = ui.tab("Tab 3", icon="healing").classes('justify-start')
    with splitter.after:
        with ui.tab_panels(tabs, value=tab1).classes("w-full h-full"):
            with ui.tab_panel(tab1).classes('w-full h-full'):
                with ui.column().classes("w-full items-center"):
                    ui.label("Tab Page 1")
            with ui.tab_panel(tab2).classes('w-full h-full'):
                with ui.column().classes("w-full items-center"):
                    ui.label("Tab Page 2")
            with ui.tab_panel(tab3).classes('w-full h-full'):
                with ui.column().classes("w-full items-center"):
                    ui.label("Tab Page 3")