Easy way remove whitespace and shrink margins for all components?

Dash Python
1

I have an app with a bunch of core and bootstrap components. I have some Tab components to help with the general layout and remove clutter, but there’s still a lot of big margins and whitespace, especially in the graphs.

Is there simple one or two line option that help with that? Is there an existing CSS sheet someone in the community can share?

I’ve no issue making my own, but I thought I would ask to save myself the pain. Thanks!

2

Can you share some screenshots of what your looking to minimize? Most of the components (if not all) have a way to reduce margin and padding from elements. For example, on an area chart you can change the margin by updating the layout:

    fig = px.area(
        spark_area_df, 
        x="insert_date", y="quantity",
        labels={
            'insert_date': '',
            'quantity':''
        },
        template='simple_white',
        log_y=True
    )
    fig.update_layout(
        margin={'t':0,'l':0,'b':0,'r':0}
    )

For bootstrap components, they offer a ton of classes to do the same thing. Spacing · Bootstrap v5.0

1 Like