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?