Several issues related to page layout

[Aues6uen11Z]

Question

Hi, I'm new to here and konw nothing about css, there are a few issues have been bothering me for a long time：

1. How to adjust the position of ui.expansion?
   I've tried style('justify-content: center') but it didn't work, I want it to align and center with the tabs below.
   

2. How to adjust the height of ui.tab?
   Many methons lead to text move up, but tabs width won't decreased. I hope the tabs are more compact and the spacing between ui.expansion and tab is smaller.
   

3. How to make long tabs not obstruct button?
   If tab list is short, It work properly. However when I continue adding tabs, ui.page_sticky got blocked.
   

4. How to let ui.scroll_area cover the entire area?
   I've tried .classes('h-full') and ended to the text entirely missing(T＿T)
   

Here is my code:

from nicegui import ui


def game1():
    with ui.row().classes('w-full'):
        with ui.column().classes('w-[15%]'):
            with ui.tabs().props('vertical').classes('w-full') as tabs:
                home = ui.tab('home', icon='home')
                with ui.expansion('Project', icon='pending', value=True).style('justify-content: center'):
                    with ui.tabs().classes('w-full'):
                        ui.tab('Settings')
                        ui.tab('log')
                with ui.expansion('Task', icon='task', value=True):
                    with ui.tabs().classes('w-full'):
                        for i in range(15):
                            ui.tab(f'Task{i}')

        with ui.column().classes('w-[65%]'):
            with ui.scroll_area().classes('border'):
                with ui.tab_panels(tabs, value=home).props('vertical').classes('w-full h-full'):
                    with ui.tab_panel(home):
                        ui.label('Home').classes('text-h4')
                        for _ in range(15):
                            ui.label('Content of home')
                        

        with ui.column().classes('w-[15%]'):            
            with ui.card().classes('w-full').tight():
                for i in range(5):
                    ui.label(f'test')


with ui.page_sticky(position='bottom-left'):
    ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('fab')

with ui.left_drawer(value=False).props('width=120') as left_drawer:
    with ui.tabs().props('vertical').classes('w-full') as drawer_tabs:
        ui.tab('game1', icon='videogame_asset')
        ui.tab('new', icon='add')

with ui.tab_panels(drawer_tabs, value='game1').classes('w-full'):
    with ui.tab_panel('game1'):
        game1()
    with ui.tab_panel('new'):
        ui.label('Content of new')

ui.run()

Further more, is there any example using NiceGUI to build a page like this? The left side has a fixed navigation bar, the middle is the corresponding content, and the right side has a fixed navigation bar for the middle content

I sincerely appreciate your time taken to read through my question and any guidance, suggestions, or solutions you may provide. I understand that community members are busy, so any input regarding this issue would be immensely valuable to me. Thanks a lot.

[Anindya088]

Hi @Aues6uen11Z ,

Just attempting question 1 first, are you meaning something like this?

So the text inside the expansion bar, as well as all the text items below, everything should be vertically center-aligned?

If I understood this correctly, then for this part you can try something like this:

tabs = ['Settings', 'log']
with ui.expansion('Project', icon='pending', value=True).props('header-inset-level=1').classes('w-[300px]'):
    with ui.tabs().props('vertical').classes('justify-center w-full'):
        for tab in tabs:
            ui.tab(tab)

I used the header-inset-level prop which lets you center align the text.
For the tabs, I used vertical on the main tabs, to make the children tabs vertical, and then use justify-center to center align them.

If you were looking for something else, and I misunderstood, then please let me know 😄

Thanks,
Anindya

[Anindya088]

Attempting question 2 now,

I suppose you mean like this?

The right side one has lesser gap between the expansion and the tab items.

So this one you can just add a margin class like this (in the same code above)

with ui.tabs().props('vertical').classes('justify-center w-full mt-[-20px]'):

I am using mt-[-20px] to move up the element by 20px.

Hope this helps 😄

Thanks,
Anindya

[Anindya088]

On the 3rd question I just tested the expansion tab and button separately like this and seems to work fine.

with ui.expansion('Task', icon='task', value=True):
    with ui.tabs().props('vertical').classes('w-full'):
        for i in range(15):
            ui.tab(f'Task{i}')

with ui.page_sticky(position='bottom-left'):
    ui.button(on_click=lambda: None, icon='menu').props('fab')

If you see, my button still remains on top and when I hover over the tab, they are below the button.

So I suppose the page_sticky as you have used should work, this one I am not really sure what the issue is.

---

On the 4th question, I suppose you are asking to make the ui.scroll_area full height of the page? Actually for that, what you said, using the h-full should work, just that you need the parent container to have some height value, otherwise the h-full does not work 😄

So something like this should work:

with ui.column().classes('w-[200px] h-screen'):
    with ui.scroll_area().classes('border h-full'):
        for _ in range(15):
            ui.label('Content of home')

I used h-screen on the parent column to make the whole thing full height.

Thanks,
Anindya

[Aues6uen11Z]

Yes, these are exactly what I want. Thank you very much for your help! At the same time, I am also shocked that such small changes can achieve these effects, I'm going to learn more front-end knowledge. Thanks again!