How to properly add style to my Dash App?

Question

I cannot add properly the CSS style to my Dash App.

I want to create a Dashboard with a side bar on the left and on the right a top bar with some metrics and the plots below, like this:

So, in my App.py file I have:

app = dash.Dash()
app.layout = html.Div(
            className="content",
            children=[

html.Div(
    className="left_menu",
    children=[
        html.Div(
            'This is the left menu'
        ),
    ]
),

html.Div(
    className="right_content",
    children=[
        html.Div(
            className="top_metrics",
            children=[
            'This is top metrics'
            ]
        ),
        html.Div(
            'This down top metrics'
        ),
    ]
),

if __name__ == '__main__':
app.run_server(debug=True)

And the css file:

.content{
 width: 100%;
 background: #F7F7F7;
 }

.right_content{
 width:85%;
 position:absolute;
 top: 0;
 right: 0; 
 }

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:85%;
 position:absolute;
 top: 0;
 right: 0;
 }

.left_menu {
 width: 15%;
 position: absolute;
 top: 0;
 left: 0;
 height: 100vh;
 z-index: 999;
 background: #2A3F54;
}

However, I get this:

I do not understand why "This down top metrics" appears there and not below "top metrics"

first of all .top_metrics { width should be 100% not 85% because its a child of a div which is child of main div. — BetaDev, May 16 '19 at 19:33
Ah, thanks. You re right. But when I do that, "This down top metrics" dissapears. I think it is showing under "top metrics" — Laura, May 16 '19 at 19:42
see my answer below, that disappears because you are using absolute instead of relative. and also dont bother yourself to write css to design layouts, just use bootstrap. — BetaDev, May 16 '19 at 20:00

score 3 · Accepted Answer · edited Jun 07 '20 at 12:51

3

Here make following for your .top_metrics:

.top_metrics {
 background: #EAEAEA;
 height: 200px;
 width:100%;
 position:relative;
 top: 0;
 right: 0;
 }

But I would recommend you to use bootstrap, where you dont have to write the css but just include the class name on your divs.

Bootstrap offers css that will give you the classes to structure your layout and html divs with responsive design for different screen sizes.

edited Jun 07 '20 at 12:51

bluenote10

23,414
14
122
178

answered May 16 '19 at 19:56

BetaDev

4,516
3
21
47

Thanks so much, @webDev . I would like to use bootstrap, but I did not find a template to implement with Dash. I have tried to use dash-bootstrap-components but It seems that all the functionality of the app (app.py) is mixed with the style of the application and it was very difficult to organize the App to me.Do you know some simple bootstrap template to implement with Dash? – Laura May 16 '19 at 20:23
you dont need template, write what you have written and instead of defining class for each div on your own use bootstrap’s css. bootstrap cas has classes like col-md-12 means that div will be 100% of width. just download the bootstrap 4 ‘s css. and instead of class for example top_metrics use bootstrap class there ok your html. Or post new question on stack overflow asking about how to use bootstrap css.\ – BetaDev May 16 '19 at 20:26

How to properly add style to my Dash App?

1 Answers1