How to set a default tab

Hi, can I know how we can set what the default tab should be when the dash app first loads? I’ve tried googling but have never found a solution.

Hi @ettan
welcome to the community. It’s depends on the method you use for creating Tabs.

In this Dash Docs’s first example, the default tab is declared as the value of dcc.Tabs (tab-1-example-graph)

dcc.Tabs(id="tabs-example-graph", value='tab-1-example-graph', children=[
        dcc.Tab(label='Tab One', value='tab-1-example-graph'),
        dcc.Tab(label='Tab Two', value='tab-2-example-graph'),
    ]),

Thanks @adamschroeder, didn’t notice that in the example. what is the best way to create tabs in your opinion? Is it via this dcc.tabs method? I have seen other people using dbc.container and then creating tabs inside but im not sure what the difference is.

Hi @ettan ,
both ways are appropriate. It really depends on your preference. I usually prefer to put them in the children of the layout.

Another way is to use Dash-Bootstrap-Components Tabs component. That is also pretty straight forward.

Thanks for the clarification @adamschroeder. Can I also clarify what’s the best way to style the visualizations? Is it via CSS or via Bootstrap classes. For example, I am currently trying to style it in this manner:
Screenshot 2022-04-05 at 20.04.01

This is done via the code below:

However, I can’t seem to get them to use the full width of the screen and to get it arranged in the specific manner I am looking for.

I’ve also tried using the bootstrap method:

but it’s appearing like this

Hi @ettan
Try this code out:

from dash import Dash, dcc
import dash_bootstrap_components as dbc

# (2) Initialise the App --------------------------------------------
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# (3) App Layout --------------------------------------------
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([dcc.Markdown('## Total UK Imports')], width=4),
        dbc.Col([dcc.Markdown('## Total UK Imports')], width=4),
    ], justify='center'),

    dbc.Row([
        dbc.Col([dcc.Graph(style={'height': 600})], width=8),
        dbc.Col([
            dcc.Graph(style={'height': 300}),
            dcc.Graph(style={'height': 300})
        ], width=4)
    ])
], fluid=True)

# (4) Run the App --------------------------------------------
if __name__ == '__main__':
    app.run_server()

Which should result in:

Notes:

  1. don’t forget to add external_stylesheets=[dbc.themes.BOOTSTRAP] to your code.
  2. in future posts don’t forge to preformat text to add code to your post just like I did above instead of using code as image.

Thanks @adamschroeder. That makes sense. Apologies about the code picture. Will add them as a preformatted text next time.

I took a look at a lot of the dash samples apps here and realised that a lot of them uses a base css template. However, I can’t seem to find the source of that template. Is there somewhere I can download the latest version of that css template from?

Hi @ettan
That css was created by someone for the purposes of that specific app. Feel free to use that CSS, I’m not sure where to find the source of that template.

@adamschroeder I am referring to for example the s1.css file here.