RangeSlider Label Gets Cut Off

Dash Python
1

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!

image
image.png953×1084 47.6 KB

1 Like
2

10 °F are two words with a space between

100°C is one word :slight_smile:

3

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…

2 Likes
4

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

2 Likes
5

Gotcha, thanks again!

6

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

1 Like
7

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

1 Like
8

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;
}

3 Likes