Need help with background color in ui.splitter #3061
-
QuestionThe 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". 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! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
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 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') |
Beta Was this translation helpful? Give feedback.
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 addingh-full
to theui.tab_panels
' classes: