Horizontally stack components

How to horizontally align some of the components? Please, look at the picture.
Here’s my current code:
app.layout = html.Div([
dcc.Upload(
id=‘upload-data’,
children=html.Div([
'Drag and Drop or ',
html.A(‘Select Files’)
]),
style={
‘width’: ‘100%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
}
),
html.Div(‘Outlier detection method:’),
dcc.RadioItems(
id=‘outlier-detection’,
options=[
{‘label’: ‘3 sigma’, ‘value’: ‘3sigma’},
{‘label’: ‘Hampel’, ‘value’: ‘hampel’},
{‘label’: ‘Boxplot’, ‘value’: ‘boxplot’}],
value=‘3sigma’
),
html.Div(‘Imputation method:’),
dcc.RadioItems(
id=‘imputation-method’,
options=[
{‘label’: ‘Mean’, ‘value’: ‘mean’},
{‘label’: ‘Median’, ‘value’: ‘median’},
{‘label’: ‘Remove’, ‘value’: ‘remove’}],
value=‘mean’,
),
html.Div(‘Window length:’),
dcc.Input(
id=‘window-length’,
placeholder=0,
type=‘number’,
value=0
),
html.Button(‘Run’, id=‘button’),
html.Div(id=‘output-graph’)
])
dash_components

3 Likes

You can kind of think of html Div objects like building blocks where each Div you put into an HTML page ‘climbs up from the bottom’, and as a default is flushed left. Thus it will place itself where it either hits the top of the page or another Div block.

Let us look at your layout code. Basically you have something like

app.layout = html.Div([ #big block
    html.Div( #small block upper most
    dcc stuff in here
    ),
    html.Div( #smaller block in middle
    dcc stuff in here
    ),
    html.Div( #smaller block at the bottom
    dcc stuff in here
    ),
])

This can be seen as you have one big block with three smaller Div blocks inside it which are placed top down as explained in my comments.
If you on the other hand does something like this:

app.layout = html.Div([ #big block
    html.Div( #small block upper most
    dcc stuff in here
    ,style={'width': '49%', 'display': 'inline-block'}), #notice style variable which wants a dict of CSS
    html.Div( #smaller now moved up beside the first block
    dcc stuff in here
     ,style={'width': '49%', 'display': 'inline-block'}), #notice style variable which wants a dict of CSS
    html.Div( #smaller block at the bottom
    dcc stuff in here
    ),
])

Now I have two blocks beside each other, and a single one below. A few notes:

  • The style variable is where you specify how things should look inside the given html.Div object. You might want to look up some CSS to see how you can manipulate with Divs.
  • Initially a Div will have a width of 100% of the screen width. I am setting the widt to 49% before declaring inline-block display to be sure that the two Divs are narrow enough to fit the same line.

I hope this makes sense, if not you might be able to convince me to try and illustrate it in paint or something. :slightly_smiling_face:

11 Likes

After my comment noticed you have quite a good hold on the Div style thing, pardon me…

In short:
You need to set ‘display’: ‘inline-block’ in your Div style.

4 Likes

Grrrrreat answer! Thank you very much!

1 Like

@Blaceus
Do you know how to increase the space between the horizontal radio items so that they span accross the entire Div evenly? I tried to use style as a parameter, but it didin’t work (i adjusted the width and margin)

I am not 100pct sure, but I think you can use the ‘justify’ property in CSS.
So from the example in the documentation under labelStyle, try adding ‘text-align: justify’ so it looks like this:

import dash_core_components as dcc

dcc.RadioItems(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    value='MTL',
    labelStyle={'display': 'inline-block', 'text-align': 'justify'} #THIS IS WHERE IT IS ADDED
)
1 Like

Hi there @Blaceus,

I’m having the same kind of issue. I want to separate more my options of the checklist:
image
I tried your suggestion:

But it doesn’t work. Any other ideias? :thinking:

dcc.Checklist(
              id = 'Tramos',
              options=[
                 {'label': 'Tramo 1   ', 'value': '1'},
                 {'label': 'Tramo 2   ', 'value': '2'},
                 {'label': 'Tramo 3   ', 'value': '3'}],
              values=['1', '2', '3'],
              labelStyle={'display': 'inline-block', 'text-align': 'justify'}
                )

Hey, I solved this problem by using the margin-right and margin-left options under labelStyle. I’ve used the same thing with checkboxes as well. My radio items object looks like this:

dcc.RadioItems(
    options = [
        {'label': 'Canada', 'value': 'CDN'},
        {'label': 'USA', 'value': 'US'},
    ],
    labelStyle = {
         'display': 'inline-block',
         'margin-right': 10
    },
    value = 'CDN',
    id = 'factor_one_country'
)
1 Like

I think you’re looking for the CSS flex property https://www.w3schools.com/css/css3_flexbox.asp
The link is pretty clear, just define a container with the appropriate flex properties and the elements inside will be arranged accordingly