search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.28k stars 5.04k forks source link

Toggle components not fully upgraded for ripple effect #1835

Open cartant opened 8 years ago

cartant commented 8 years ago

When switches, radio buttons and checkboxes are upgraded using the componentHandler, the internal __ripple-container is not upgraded and the ripple is not effected when the toggle is clicked. There is a copdepen here that puts statically-created and dynamically-created toggles side by side.

With the statically-created switch, the mdl-switch__ripple-container looks like this:

<span class="mdl-switch__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple is-animating" style="width: 137.765px; height: 137.765px; transform: translate(-50%, -50%) translate(24px, 24px);"></span></span>

And with the dynamically-created switch, like this:

<span class="mdl-switch__ripple-container mdl-js-ripple-effect mdl-ripple--center"><span class="mdl-ripple"></span></span>

The dynamically-created switch's label contains this attribute:

data-upgraded=",MaterialSwitch,MaterialRipple"

suggesting that the switch component has been upgraded for the ripple effect, but without the internal mdl-switch__ripple-container being upgraded, too, there'll be no ripple effect.

Note that explicitly upgrading the mdl-switch__ripple-container using the componentHandler results in the expected behaviour, but that should not be necessary: the componentHandler should fully upgrade the component.

surma commented 8 years ago

FYI @cartant, I just looked into this and we seem to have even more problems with ripple being positioned weirdly. Some work needs to be done here.