How can I remove default padding of ScrollArea?

[ParkingLot0326]

Question

I tried making a scrollable listarea containing multiple widgets.
but I couldn't change the padding inside ScrollArea...

what I've tried:

1. Setting styles of every element with "gap: 0; margin:0; padding: 0;"
2. ui.query(".nicegui-content").classes("gap-0 m-0 p-0")
3. ui.query(".q-scrollarea__content").classes("gap-0 p-0 m-0")

minimal reproducible code:

with ui.scroll_area().classes("w-full").style("gap:0; margin:0; padding:0; border:1px solid red;"):
    with ui.column().style("width:100%; gap:0; padding:0; margin:0;"):
        for i in range(0, 100):
            with ui.row().style("width: 100%; background-color: lightblue; border: 1px solid black;"):
                ui.label(i).style("width:100%; margin:4px;")
ui.run()

result of said code:

I want to change/remove the padding b/w the border of ScrollArea and the elements.

Is there any way to achieve this?

[balex89]

Hi, @ParkingLot0326! Try adding property content-style (also content-active-style):

with ui.scroll_area().classes("w-full").style("gap:0; margin:0; padding:0; border:1px solid red;") as area:
    area.props.update({
        'content-style': {'padding': 0},
        'content-active-style': {'padding': 0}
    })
    with ui.column().style("width:100%; gap:0; padding:0; margin:0;"):
        for i in range(0, 100):
            with ui.row().style("width: 100%; background-color: lightblue; border: 1px solid black;"):
                ui.label(i).style("width:100%; margin:4px;")
ui.run()

For more info and other Quasar ScrollArea properties that might be useful: https://quasar.dev/vue-components/scroll-area/

[ParkingLot0326]

works like a charm. thanks!