Spacing for core components (HTML?)

Dash Python
1

Hi all,

I have a number of Core components that I want below a graph that I am building.

I split them into two columns. But this looks like this:

58
Screen Shot 2018-08-08 at 21.23.58.png2418Ă—320 78.3 KB

How do I fix this?

2

I am not entirely sure what your are asking. If it is the text and slider ticks lying on top of one another, I would suggest inserting a html.Br() between the dcc components. Something like:

html.Div([
   dcc.Slider(stuff...),
   html.Br(),
   dcc.Slider(more stuff...)
])
1 Like
3

The problem is that slider has styles without markers considered, so slider with markers needs additional space below, about 1em is right to fit it, 1.5em to have some room below. Luckily slider with markers has separate class name and you can simply add CSS like:

.rc-slider-with-marks {
    margin-bottom: 1.5em;
}

Or as inline style use:

dcc.Slider(..., style={'marginBottom': '1.5em'})
1 Like
4

That doesn’t work.

It says that Slider does not have an attribute called “style”.

I am unsure where to place:
.rc-slider-with-marks {
margin-bottom: 1.5em;
}

5

@kim.rants: Sorry, that should be:

html.Div([
    dcc.Slider(...)
], style={'marginBottom': '1em'})

As for

.rc-slider-with-marks {
  margin-bottom: 1.5em;
}

this is cascade style sheet rule, that goes to .css file. More on how to add it to Dash app can be found in User Guide. About CSS itself can be found for example on w3schools.

6

Is there anything planned to make customization of the Slider easier? I noticed recently better accessibility has been added to Checklist and Tabs component, would be nice to do the same for the Slider. @chriddyp

edit: especially interesting whether the component itself could also be bound to the new html5 range input?