✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

RangeSlider Label Gets Cut Off

As per the example in the Documentation, I’m implementing a RangeSlider similar to the image at the bottom.

https://dash.plot.ly/dash-core-components/rangeslider

Why is it that the 10 °F label gets cut off onto the next line, but the 100 °C label stays on one line? The one I’m creating also gets cut off. Below is the code in my app.layout for my use case, which results in something like the blue circle:

html.Div(children=[
    dcc.RangeSlider(id='bin-selector', min=0, max=1, step=0.25, value=[0,1], 
        marks={0:'Bin 0', 0.25:'Bin 0.25', 0.50:'Bin 0.50', 0.75:'Bin 0.75', 1:'Bin 1'})],
    style={'width':'500px', 'text-align':'center', 'margin':'auto'}),

I would like my result to be formatted like the red circle, not the blue circle. Thank you!

10 °F are two words with a space between

100°C is one word :slight_smile:

That’s a very strange limitation of dcc.RangeSlider(). After some testing considering that Bin 1.0 has a space in between, this is what I found:

Bin 1.0 Two lines :sob:

Bin-1.0 Two lines :frowning_face:

Bin_1.0 One line :white_check_mark:

Bin:1.0 One line :white_check_mark:

Bin>1.0 One line :white_check_mark:

Bin=1.0 One line :white_check_mark:

It also seems like this issue only arises when the label is the right-most label

Most other characters seemed to work here. @David22 I’ve marked your answer as the solution, however it’s still unclear if the problem is solved. Is this a purposeful of dcc.RangeSlider()? Or a possible bug? I wonder…

1 Like

not a bug, the space for each label depends on the screen width, or on the container width, depending what is smaller.

You can force the label to break anywhere with CSS properties word-break: break-all/break-word/normal /unset

You can make the font smaller;
you can increase the padding of your slider’s container on the left and right sides, to avoid the label to be cut

Use the css properties to get the result you need

1 Like

Gotcha, thanks again!

Also https://en.wikipedia.org/wiki/Non-breaking_space

1 Like

Thank you for the external link! @alexcjohnson :smile:

1 Like

Here is the CSS I used to keep the last label on a single line:

.rc-slider-mark-text:last-child{
transform: translateX(50%) !important ;
right: 0% !important;
left: auto !important;
}

1 Like