Spurious padding makes aligning dcc.Slider problematic

[ptocca]

I am trying to align a horizontal dcc.Slider without tooltip with a dcc.Input on the same row. I would like them to be center-aligned. It should be easy-peasy.

After much struggle, using the Inspector in Firefox I realized that the React rc-slider is wrapped by a div element that hardcodes padding with style="padding: 0px 25px 25px". This creates the problem. The rc-slider is effectively in a box with padding 0 on top and 25 on the bottom. So what happens is that that box is vertical aligned (through its middle) with the dcc.Input, but the slider is at the top of the box. The resulting effect is unsatisfactory.

Why do we have the padding of 25px on the bottom? This does not seem right to me. I managed to find a workaround for it by defining a CSS class that sets a -25px bottom margin, with which to cancel the 25px padding, and specifying the class in className when creating the dcc.Slider. But it is an ugly hack.

The hardcoded style is computed by computeSliderStyle() on the basis of the tooltip settings. I suggest that this function be fixed (in the horizontal case) by setting both top and bottom padding according to the tooltip setting, making sure that centered vertical alignment is preserved.

Thank you