RangeSlider final element is not aligned with the rest

Dash Python
1

Still quite new to css and layout so please forgive me for this trivial question. I have created a rangeslider with the following code (the slider value is temporary):

date_list2 = {0:{'label': "2-2", 'style':{'font-size':'10px'}},
 1:{'label': "2-2", 'style':{'font-size':'10px'}},
...
 14:{'label': "2-2", 'style':{'font-size':'10px', 'margin-right':'10px'}}}

The layout section:

 html.Div(
            dcc.RangeSlider(
            id='my-range-slider',
            min=0,
            max=14,
            value=[0, 14],
            step = None,
            marks = date_list2,
            allowCross=False
            ),style={'width': '60%', 'display': 'inline-block', 'height': '50px'},)

The final element is out of line for some reason even it clearly has enough space to fit it.

image

I have tried changing value, changing the font-size and the margin for the mark style but it does not fix the behavior. I understand the string probably hits the border of the component that is why it is wrapping to another line

Edit: I sort of got it working with

‘text-indent’:‘-2em’

for the last marker. Is this the right approach?

2

Exactly same problem here!

Actually this is also visible on some of the examples in the documentation: dcc.RangeSlider | Dash for Python Documentation | Plotly

Indent work fine, but a better option would be to use padding/margin. Dear Plotly, any ideas how to do that?

3

Hi @tonywang531 and @Hikari,

I’ve encountered the same issue with yours. However, check out this post by @adab here which fixed my issue permanently.