Simple Question on margins/paddings when using external CSS

Dash Python
1

Dear all,

I am using some external (bootstrap)-CSS (e.g. dbc.themes.DARKLY) but would like the content to be able to occupy more width of my display/browser window.
I am not used to CSS at all, however tried some style arguments like padding or margin, but without the wanted effect.

I start my layout using self.app.layout = dbc.Container(my_routine_to_fill_the container(), style=my_style_dict).

Thank you very much in advance for your help!

Best wishes
Markus

2

Hi,

Check the style in browser debugging tool like Inspector.
I assume the external stylesheet is setting the body margin, you need to
change that and do check the CSS properties set by you have more precedence.

3

Thanks @netro !

I checked this, and to be sure, I added local.css to the assets-folder with content

body {
   margin: 10px; 
   padding: 10px;
   border-style: solid;}

from the visible border I can see, that the body extents as expected. However, what is rendered inside I still cannot change the width, shifting is working, though, e.g.

        self.app.layout = dbc.Container(my_page_layout_generator(),
                style={'padding':'0', 'margin': '0', 'width': '1600px'},
        )

the width is ignored. But setting the width to smaller values works. Thus, I reckon that somewhere in the external css file there is some maximum defined. But as I am not familiar with CSS, no idea how and where this is coded.

Thanks a lot again for any hint!

Markus

4

HI @markus-w and welcome to the Dash community :slightly_smiling_face:

If you are just starting out with Dash and using the dash-boostrap-components library, I recommend trying to stick with the Bootstrap classes and only rarely over-riding those classes with custom CSS. This will give your app a consistent look.

It’s worthwhile spending a little time with the tutorial in the dash-boostrap-components library.

  1. Start here: Quickstart - dbc docs
  2. Pick your theme: Themes - dbc docs
  3. First example app and how to use the snippets in the tutorial: Components - dbc docs
  4. More info on the layout: Layout - dbc docs
  5. Cheatsheet for using Bootstrap classes with Dash: https://dashcheatsheet.pythonanywhere.com/

You will see in the tutorial app in step 3 that if you add ‘fluid=True’ to the Container, then the content will be the full width of the screen… So in your example it would be :

app.layout = dbc.Container(my_page_layout_generator(), fluid=True))
2 Likes
5

Hi @AnnMarieW !

Yes! fluid=True did the trick. In fact, I’ve seen this option from time to time in some examples but was not aware of it’s role.
Thank you also for the links, which I have came across already but overlook in 4. the explanation of fluid.

Best wishes
Markus

2 Likes