[Bad behaviour] dcc.Slider marks misaligned with empty label in Dash 4 #3715
Description
When creating custom marks for a dcc.Slider in Dash 4, the marks/ticks become misaligned if the label is empty. See this example slider:
The marks/ticks without label sink to the bottom of the mark+label box. In this example I used an empty string for an empty label. If I add some spaces there, the result is the same.
Use Dash 4.1.0 and this small app to replicate:
import dash
from dash import dcc, html
app = dash.Dash(__name__)
empty_label = ""
# empty_label = "\xa0"
marks = {val: (val if val % 10 == 0 else empty_label) for val in range(0, 151, 5)}
app.layout = html.Div(
[
html.H2("Dash 4 Slider tick misalignment"),
dcc.Slider(
id="slider",
min=0,
max=150,
step=None,
value=0,
marks=marks,
),
],
style={"width": "40%"}
)
if __name__ == "__main__":
app.run(debug=True)
I did find a (temporary) workaround. By taking an invisible unicode character as the empty label, for example: \xa0, it is possible to get the marks aligned again, see:
Though it would be nicer if we wouldn't have to rely on a hack like that.