Position of a dash dropdown inline with other components

Question

I am using plotly Dash and i am having problems with the position of a dash component on the page. It’s the ‘change the year’ dropdown as shown in the picture below. I would like it to be where i show with the arrow, whereas it’s below my first radioitem component.

My code below:

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets= external_stylesheets  )

# determining the layout of the page
app.layout = html.Div( [
    html.Div( [
        html.Label( ['Change continent:'],
                    style={'font-weight': 'bold', 'display': 'inline-block', 'justifyContent': 'center', 'width': '65%',
                           'height': '100%'},
                    ),

        dcc.RadioItems(
            id='radio_ITEMS',
            options=[
            {'label': 'AMERICA', 'value': 'graph1'},
            {'label': 'EUROPE', 'value': 'graph2'},
            {'label': 'ASIA', 'value': 'graph3'}],
            value='graph1',


        ),
    ], className='six columns' ),

    html.Div( [
            html.Label( ['Change the variable:'],
                        style={'font-weight': 'bold', 'display': 'inline-block', 'justifyContent': 'center', 'width': '65%',
                               'height': '100%'},
                        ),

            dcc.RadioItems(
                id='radio_items2',
                options=[{'label': x, 'value': x} for x in cols1],
                value='Happiness Score',

            ),
        ], className='six columns' ),
    html.Div( [
        html.Label( ['Change the  year:'], style={'font-weight': 'bold', 'display': 'inline-block'}),
        dcc.Dropdown(id="drop",
                     options=[
                         {"label": "1970", "value": 2015},
                         {"label": "1980", "value": 2016},
                         {"label": "1990", "value": 2017},
                         {"label": "2000", "value": 2018},
                         {"label": "2010", "value": 2019}],
                     multi=False,
                     value=2015,
                     style={"width": "35%"},
                     )]),

    html.Div(
        dcc.Graph( id='the_graph',
                   style={'height': 600, 'width': 1000, }
                   ),
    ),
] ,className= 'fifteen columns')

@app.callback(
    Output( 'the_graph', 'figure' ),
    [Input( 'radio_ITEMS', 'value' ),
     Input( component_id='radio_items2', component_property='value' ),
     Input('drop', 'value')]

Answer 1

As a rule of thumb, adjust the style of your app using css, not inline style.

The issue you're experiencing is that the width of your divs are in sum greater than 100% therefore making them span multiple rows. You can fix using the code provided below.

Remove the styling from your code + use broad classes (specific ids if necessary):

# determining the layout of the page
app.layout = html.Div( [
    html.Div(
        classname="my-cols",
        children = [
            html.Label('Change continent:'),
            dcc.RadioItems(
                id='radio_ITEMS',
                options=[
                    {'label': 'AMERICA', 'value': 'graph1'},
                    {'label': 'EUROPE', 'value': 'graph2'},
                    {'label': 'ASIA', 'value': 'graph3'}
                    ],
                value='graph1',
                ),
            ]
        ),
    html.Div(
        classname="my-cols",
        children = [
            html.Label('Change variable:'),
            dcc.RadioItems(
                id='radio_items2', # id naming should be consistent...
                options=[{'label': x, 'value': x} for x in cols1],
                value='Happiness Score',
                ),
            ]
        ),
    html.Div(
        classname="my-cols",
        children = [
            html.Label('Change year:'),
            dcc.RadioItems(
                id='radio_items2', # id naming should be consistent...
                options=[
                         {"label": "1970", "value": 2015},
                         {"label": "1980", "value": 2016},
                         {"label": "1990", "value": 2017},
                         {"label": "2000", "value": 2018},
                         {"label": "2010", "value": 2019}
                     ],
                multi=False,
                value='Happiness Score',
                ),
            ]
        ),
    html.Div(
        dcc.Graph(
            id='the_graph',
            ),
        )
) # close the app!

Create a css file in your project root – or create a folder in the root named styles and add a file in that folder. Name is arbitrary...

.my-cols{
  width: calc(100%/3);
  float: left;
}

/* The following formats the content whose id = the_graph*/
@the_graph{
  height: 600;
  width: 1000
}

/* Style all labels*/
label{
  font-weight: bold;
  display: inline-block;
  /* I don't think you need these style configs... (justify, w, h)...*/
  justifyContent: center;
  width: 65%;
  height: 100%;
}

This should solve your problem.