How to remove margin between header and content

[tz301]

Question

I have found one solution to remove left and right margin here: https://nicegui.io/documentation/query#modify_default_page_padding

how to remove margin between header and content? Code as below.

ui.header().classes('items-center duration-200 p-3 px-4 no-wrap gap-0')
ui.query('.nicegui-content').classes('p-0')
ui.card().classes('w-full bg-green')

[falkoschindler]

Hi @tz301,

It looks like the header height is locked in place before duration-200 causes the header to resize, while the green card does not move. Increasing the duration and removing some other classes makes it a bit clearer:

ui.context.client.content.classes('p-0')
with ui.header().classes('py-3 duration-500'):
    ui.label('Header')
ui.card().classes('w-full bg-green')

Strangely, using p-3 instead of py-3 works. To me it looks like a strange bug in Tailwind or Quasar.

As a workaround, you can use CSS definitions instead:

with ui.header().style('padding-top: 0.75rem; padding-bottom: 0.75rem; transition-duration: 500ms;'):
    ...

[tz301]

Thanks!