Need help with background color in ui.splitter

[happybeginning1]

Question

The code below generally meets my needs, but there's an issue that requires further improvement.

from nicegui import ui

ui.add_head_html('''
                <style>
                    :root {
                        --q-dark-page: #222222; /* Define a custom CSS variable for a dark page background color. */
                    }
                </style>
                ''')
                
dark = ui.dark_mode()
dark.enable()

with ui.element('div').classes('w-full  text-sm'):
     
     with ui.splitter(value=7.5, limits=[7.5,7.5]).classes('w-full').style(f"background-color: #1d1d1d") as splitter:
         with splitter.before:
             with ui.tabs().props('vertical').classes('w-full') as tabs:
                 
                 #
                 exam = ui.tab('exam')
                 head = ui.tab('head')
                 lung = ui.tab('lung')
                 
         with splitter.after:
             with ui.tab_panels(tabs, value=exam).props('vertical').classes('w-full min-h-96'):
             
                 with ui.tab_panel(exam).classes('py-1.5'):  
                     
                         with ui.expansion(text='I am the title', group='exam').classes('w-full'):
                              with ui.card().classes("no-shadow border-[0.5px] w-full"):
                                 ui.label('I am the upper content')
                                 ui.separator()
                                 ui.label('I am the lower content').classes('break-all')
                        
                         with ui.expansion(text='I am the title', group='exam').classes('w-full'):
                             with ui.card().classes("no-shadow border-[0.5px] w-full"):
                                ui.label('I am the upper content')
                                ui.separator()
                                ui.label('I am the lower content').classes('break-all')
                        
                         with ui.expansion(text='I am the title', group='exam').classes('w-full'):
                             with ui.card().classes("no-shadow border-[0.5px] w-full"):
                                ui.label('I am the upper content')
                                ui.separator()
                                ui.label('I am the lower content').classes('break-all')
                        
                         with ui.expansion(text='I am the title', group='exam').classes('w-full'):
                             with ui.card().classes("no-shadow border-[0.5px] w-full"):
                                ui.label('I am the upper content')
                                ui.separator()
                                ui.label('I am the lower content').classes('break-all')
                
                 with ui.tab_panel(head).classes('py-1.5'):  
                    
                        with ui.expansion(text='I am the title', group='head').classes('w-full'):
                             with ui.card().classes("no-shadow border-[0.5px] w-full"):
                                ui.label('I am the upper content')
                                ui.separator()
                                ui.label('I am the lower content').classes('break-all')
                                
                                
                 with ui.tab_panel(lung).classes('py-1.5'):  
                    
                        with ui.expansion(text='I am the title', group='lung').classes('w-full'):
                             with ui.card().classes("no-shadow border-[0.5px] w-full"):
                                ui.label('I am the upper content')
                                ui.separator()
                                ui.label('I am the lower content').classes('break-all')
                                 
                                 
ui.run()

The problem is with the labels "EXAM", "HEAD", and "LUNG".
The "EXAM" label has enough content items, so its background color looks fine. However, for the "HEAD" and "LUNG" labels, since they contain fewer content items, there's a blank area on the right side beneath the content. I would like this area to also have the same background color as the content titled "I am the tile". (as shown in the image below)

I tried adding a background color attribute to the ui.splitter:

with ui.splitter(value=7.5, limits=[7.5,7.5]).classes('w-full').style(f"background-color: #1d1d1d") as splitter:

It resolves the issue of the background color in the mentioned blank area. However, it also changes the background color of the labels in the left part (splitter.before), which is not what I want (as shown in the image below).

Could anyone offer some advice on how to achieve the desired effect? Thanks a lot!

[falkoschindler]

Hi @happybeginning1,

This is a tricky question which took me a while to figure out. It looks like the "after" slot has a height of 100% per default, which - strangely - causes it to not fill the vertical space. At least I could get the dark background to grow by setting the prop after-class="!h-[unset]" and adding h-full to the ui.tab_panels' classes:

ui.add_css(':root { --q-dark-page: #222222 }')
ui.dark_mode(True)

with ui.splitter(value=7.5, limits=(7.5, 7.5)).classes('w-full').props('after-class="!h-[unset]"') as splitter:
    with splitter.before:
        with ui.tabs().props('vertical').classes('w-full') as tabs:
            exam = ui.tab('exam')
            head = ui.tab('head')
            lung = ui.tab('lung')
    with splitter.after:
        with ui.tab_panels(tabs, value=exam).props('vertical').classes('w-full h-full'):
            with ui.tab_panel(exam):
                ui.expansion(text='Title').classes('w-full')

[happybeginning1]

Hi @falkoschindler,

Thank you so much for your patience and thorough explanation. Your solution perfectly resolved the issue I was facing. Truly appreciate your help!