I’m trying to make a dcc.RangeSlider
with vertical text markers because I have a large number of slider increments. I’ve followed recommendations here, and been successful in getting slider marks aligned vertically. However, I cannot seem to add more space for the marks, and they keep getting squished, see Fig. 1.
Fig. 1: Screenshot of squished, text-wrapped slider markers
Here’s a MRE which creates the slider above:
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from datetime import datetime,timedelta
app = dash.Dash(name=__name__,
external_stylesheets=[
dbc.themes.SLATE,
],
)
num_time = [x for x in range(6)]
#create marks with stile
style={"writing-mode": "vertical-rl"}
marks = {x:{"label":(datetime.now()+timedelta(days=x)).strftime("%d-%m %I %p"),"style":style} for x in num_time}
controls= dbc.Card(
[
dbc.FormGroup(
[
dbc.Col(
dbc.FormGroup(
[
dbc.Label("Select a date range for daily totals"),
dcc.RangeSlider(
id="ts_selector",
min=num_time[0], #the first date
max=num_time[-1], #the last date
value=[num_time[0],num_time[-1]], #default: the first
marks = marks,
allowCross=False
)
],
),
md=6,
),
],
row=True,
)
],
body=True,
)
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(controls, md=6,style = {'height':'100vh'}),
],
align="top",
className="h-100"
),
],
fluid=True,
style={"height": "100vh"},
)
if __name__ == '__main__':
app.run_server()
I’ve tried all kinds of permutations of adding margins to columns, adding padding around elements, but cannot seem to solve the issue. My desired output would be to have the date text markers vertically aligned with no text wrapping. Any help appreciated!
P.S. I’m working with dash==1.18.1
.