Control Number of Columns Inside Tabs

[tanthiamhuat]

I have different number of tabs as shown. In my particular tab (Summary Overview), I want to have 2 columns for the words: Summary Overview of Punggol Consumption (1st column), Time Step: Daily, Hourly (2nd column, on the same row), follow by a plot on the new next row, but occupy the whole column. Can I know how to achieve this?

See printscreen here https://i.imgur.com/FxzkHoL.png. The top part is the original one, and I want to achieve the bottom one.

I have tried style={‘columnCount’: 2} but it is messing things up, and maybe I insert at the wrong place.
Also, I want to control at the Python script level, not at CSS level, which I find confusing, and also different tabs have different needs.

Thanks.

[caiyij]

Do you mean placing them side by side? Have you tried the code below?

html.Div([
        html.Div([
            ...
        ], className="six columns"),

        html.Div([
            ...
        ], className="six columns"),
    ], className="row")
])

Two graphs, side by side

CSS is a good way to do this. Here’s an example using the default style sheet (https://codepen.io/chriddyp/pen/bWLwgP): import dash import dash_html_components as html import dash_core_components as dcc app = dash.Dash() app.layout = html.Div([ html.Div([ html.Div([ html.H3('Column 1'), dcc.Graph(id='g1', figure={'data': [{'y': [1, 2, 3]}]}) ], className="six columns"), html.Div([ html.H3('Column 2'), dcc.Graph(id='g2…

[tanthiamhuat]

Thanks Caiyij for your reply. Fantastic, it works. See https://i.imgur.com/vYmcJiR.png
Is it possible to have the Time Step Hourly Daily in a single line also?

[caiyij]

Of course, you can adjust the width of those component. For example six columns for title, two columns for "Time Step"m and four columns for the RadioItems (Hourly Daily).

[tanthiamhuat]

thank you.