Rmwc: Slider in a dialog: Thumb position isn't correct

[rboei]

Hey James,
RMWC version: ^1.6.2
react version: ^16.2.0
Browser: Firefox 61.0b5 (64-Bit)

i have a problem regarding a slider in a dialog. The thumb position is simply not correct:

If i look at the generated html, the slider thumb x-translation gets a wrong value: If i scale the width by the scale of the mdc-slider track it would be correct, but it generates a different value:

translateX should be around 380px in this case.

Any suggestions?

Kind regards,
Rene

[jamesmfriedman]

This is definitely an MDC related issue, but I ran into it myself.

Basically, the Slider only runs its layout code whenever it first renders and when the window is resized. Without seeing a repro, I can assume that the slider renders initially while the dialog is animating, causing it to be misaligned.

Heres was my workaround, I think it might work for you as well. You could also try digging into the actually component ref (would give you the class api), and manually calling the layout function. This hack is just easier and less specific.
https://github.com/jamesmfriedman/rmwc/blob/master/src/docs/App.js#L48

[rboei]

Hey James,
thank you, your workaround did the trick for now.

Kind regards,
Rene

[oste]

@jamesmfriedman @rboei, what is the hack mentioned here? I am also noticing this when using a Slider in a Dialog.

Thanks

[rboei]

Hey Mike,
the hack is using an resize event to trigger the recalculation of the dimensions, after you rendered the dialog:
componentDidUpdate(prevProps, prevState, snapshot) { if (prevProps.open !== this.props.open) { setTimeout(() => { window.dispatchEvent(new Event("resize")); }, 300); } }