Not really "getting" the six columns thing

Dash Python
1

Hi all

I’m not a web designer and DASH is like a breath of fresh air. Even I can get things done, thanks so much to the community for this. ANYWAY, here’s my question. I don’t get the "className=‘six columns’ " thing. For some reason I thought it meant that the web page had been split into 6 sections and when you plotted something it would size each plot proportionately. Imagine my suprise when I tried the code below only to have the first two plots (linechart and hvchart) on one “line” THEN “an_chart” on the next “line” followed by “mk_chart” on the next line. So it’s two charts, one chart, one chart…


 html.Div([
                                  html.Div([ dcc.Graph(id='linechart'), ] ,className='six columns' ),

                                  html.Div([ dcc.Graph(id='hvchart'),  ],className='six columns'),

                                  html.Div([ dcc.Graph(id='an_chart'),  ],className='six columns'),

                                  html.Div([ dcc.Graph(id='mk_chart'),  ],className='six columns'),
                                
                                  
                                 ]

                                 ,className='row'),
1 Like
2

Hi @comicpilsen,

In this CSS framework, the layout is divided in 12 columns. Then you can specify how many columns an element spans. Thus if you want to have your four graphs in the same row, you should size them with 12/4=3 columns:

html.Div(
    [
        html.Div([dcc.Graph(id='linechart')], className='three columns'),
        html.Div([dcc.Graph(id='hvchart')], className='three columns'),
        html.Div([dcc.Graph(id='an_chart')], className='three columns'),
        html.Div([dcc.Graph(id='mk_chart')], className='three columns'),
    ],
    className='row'
)

PD: For those who might be wondering why in the example given you do not see two graphs and then two graphs, it is because of how the margins are set for elements within a row element. The first element with columns class does not get left margin whereas the subsequent ones do. When you have the last two elements with six columns, the last element does not fit on the same line as the second and thus goes to the next one.

2 Likes
3

@RenaudLN

absolutely perfect answer. Worked like a champ :slight_smile: thank you so much for taking the time to explain it in such detail AND to go the extra yard to clarify why I was seeing the 2 1 1 behavior.
have an excellent weekend
cp