Expansion Content Padding

[PoshoDev]

Question

I'm using the ui.expansion to create a navigation drawer, but I can't seem to adjust the vertical space between the header and the first item ("Button 1").

from nicegui import ui

with ui.expansion('My Expansion').classes("border").style("padding: 0px; margin: 0px; gap: 0px;"):
    with ui.column().classes("w-full border").style("border-color: red"):
        ui.button('Button 1').classes("w-full")
        ui.button('Button 2').classes("w-full")

ui.run()

I need to adjust the space highlighted in blue.

I've also tried setting padding and margin to 0 with ui.add_css() on .q-expansion-item__content, .q-item, .q-expansion-item__header, and other related classes, but I can't get it to work.

None of these seem to affect the vertical spacing. How can I eliminate the gap between the header and the first item? Could anyone offer some advice on how to get it to work? Thanks a lot!

[python-and-fiction]

with ui.expansion('expansion').classes('bg-grey'):
    ui.query('.nicegui-expansion .q-expansion-item__content').style('padding:0',replace='gap:0')
    ui.button('button').classes('w-full h-full')
    ui.button('button').classes('w-full h-full')

[PoshoDev]

with ui.expansion('expansion').classes('bg-grey'):
    ui.query('.nicegui-expansion .q-expansion-item__content').style('padding:0',replace='gap:0')
    ui.button('button').classes('w-full h-full')
    ui.button('button').classes('w-full h-full')

Thank you so much! I definitely would've never gotten to that solution on my own!

One slight thing to note about this solution would be that every subsequent expansion would have the same padding and gap after running the ui.query:

from nicegui import ui

with ui.expansion('expansion').classes('bg-grey'):
    ui.query('.nicegui-expansion .q-expansion-item__content').style('padding:0',replace='gap:0')
    ui.button('button').classes('w-full h-full')
    ui.button('button').classes('w-full h-full')

with ui.expansion('My Expansion').classes("border").style("padding: 0px; margin: 0px; gap: 0px;"):
    with ui.column().classes("w-full border").style("border-color: red"):
        ui.button('Button 1').classes("w-full")
        ui.button('Button 2').classes("w-full")

ui.run()

However, that's something I can work with.

Thank you so much for the help! :)

[python-and-fiction]

you can select id like this:

with ui.expansion('expansion') as exp1:
    ui.query(f'#c{exp1.id} .q-expansion-item__content').style('padding:0',replace='gap:0')
    ui.button('button').classes('w-full h-full')
    ui.button('button').classes('w-full h-full')

with ui.expansion('expansion'):
    ui.button('button').classes('w-full h-full')
    ui.button('button').classes('w-full h-full')

[PoshoDev]

ui.query(f'#c{exp1.id} .q-expansion-item__content').style('padding:0',replace='gap:0')

That did the trick so well! Thank you so much! 😁