Material-design-lite: Switch component positionning

[cmalard]

Hi,

The switch component is made with absolute positionning and it seems hard to make it appears _after_ its label and not before.
Is there any simple way ?

Thanks

[surma]

The switch component should only use absolute positioning _inside_ its scaffolding, you should be able to position it freely. Can you provide a CodePen with your attempt and maybe a mock showing the desired result?

[cmalard]

Here it is : http://codepen.io/anon/pen/rOBmxd

[surma]

Ah, I understood you completely wrong. Thanks for the codepen @cmalard.

@sgomes WDYT about mdl-switch__label--right or something along those lines?

[Garbee]

mdl-switch__label--right sgtm.

[sgomes]

Yup, makes sense.

[cmalard]

:+1:

[sgomes]

I spent some time investigating this today, and sadly it's too complicated to implement under the current component structure. We're absolutely positioning 3 separate elements, so we'd either have to move all of those to relative positioning and play around with negative margins, or we'd have to add a container somewhere in the hierarchy, to group the 3 together.

I'll move this to v2, with the goal of making sure this is possible under the new component structure.

[szimek]

Just in case somebody is looking how to solve it in the current (i.e. 1.1.x) version - I've just had this issue today and solved it with a second label. Fortunately, according to the spec one input can be associated with multiple labels. I just put a second label first, then the switch and position everything using grid and cells: http://codepen.io/szimek/pen/XdWOYM?editors=1100. There's an issue with the ripple effect though - it's not removed after clicking the label. Maybe there's a better way that doesn't break ripple effect.

[Garbee]

This issue is superseded by #4478

[amanagarwal2189]

Hi, did we arrive at any workable solution to this issue?