RangeSlider final element is not aligned with the rest

@tonywang531 wrote:

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.

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?

Posts: 1

Participants: 1

Read full topic