0

I've been trying to remove these margins (highlighted in red, on the left and right) on my Dash app, but nothing seems to be working. Even using the Chrome developer tools, I can't remove them:

enter image description here

app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{'name': 'viewport',
                            'content': 'width=device-width, initial-scale=1.0'}]
                  )

app.layout = dbc.Container([              

        dbc.Row([qipid_selector, pura_title]),
        dbc.Row(csbm_graph_card),
        dbc.Row(sms_graph_card),
        dbc.Row(interventions_graph_card)
                           
], style={

    'background':'grey'
})

I've tried doing margin-left: 0, margin-right: 0 in the style dict of app.layout, but this only removes the left margin (not the right for some reason.) I've set the background of (I think) the highest-level component as grey, and even this doesn't extend past these invisible margins.

I believe the issue is the margin is being set in the body. However, I'm running this on Google Colab, so I'm unsure how to use an external CSS sheet to fix it. Does anyone have ideas to fix this within the main file?

Mo Asghari
  • 251
  • 2
  • 11
chillingfox
  • 131
  • 9
  • 1
    maybe don't use `Container` but `Div`? Or put `Container` inside `Div` also with `grey` background. OR try style `width: 100%` – furas Nov 12 '21 at 00:00
  • 1
    you could create `minimal working code` which we could simply copy and run it - to see problem and test some ideas for solutions. – furas Nov 12 '21 at 00:05
  • Does this answer your question? [Dash - dbc.container fluid = True does not cover all available space](https://stackoverflow.com/questions/68823379/dash-dbc-container-fluid-true-does-not-cover-all-available-space) – 5eb Nov 12 '21 at 17:06

0 Answers0