mwc-switch ripple is causing unwanted scrollbars (switch without text)

[Misiu]

Describe the bug
When using mwc-switch aligned to right it is causing unwanted vertical scrollbar.
Also when used without text it causes a horizontal scrollbar to appear:

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/material-web-components-8nfuqy?file=components%2Fdemo-mwc-switch%2Fdemo-mwc-switch.js
2. Click on the hamburger menu and choose mwc-switch
3. Click on switch for Lisa or Bart
4. See the scrollbar for a second

As a workaround, I'm adding   as content.
Expected behavior
the switch should have the same behavior when used with and without text.

Screenshots

Browser Version (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
the switch is used by Home Assistant, more details about the error can be found here: home-assistant/frontend#5084

[asyncLiz]

As an FYI, according to our docs there should not be a slot for switch. This aligns with MDC as well. The proper way to add a label for a switch would be with <mwc-formfield>.

We should probably remove the slot.

[Misiu]

@asyncLiz @dfreedm any news about this?
For now, I have a workaround, but I'd like to use a proper solution/fix.

[asyncLiz]

Does this issue occur when using <mwc-formfield>?

[Misiu]

@asyncLiz take a look at the results: https://stackblitz.com/edit/material-web-components-ccj5wp?file=index.js

I want to get results as first two options, but not sure how to do that with mwc-formfield (label on left, switch on right)

mwc-formfield has one behavior I like - it allows changing the state of the switch by clicking on the label

BTW can we change align of switch and label?

[asyncLiz]

I was asking if you experienced the same scrollbar issue with the formfield as opposed to setting the inner text of the switch. If using formfield adds scrollbars in the wrong places, that'd be a concern.

For your use case though, I would avoid the formfield entirely and set it up yourself, since you have a UX that's outside the default scope of formfield. You can add aria labels to the switch for a11y and call .focus() and .click() on the switch whenever the label is clicked on.

That will match the functionality of the formfield element.

As far as alignment, it looks like that's a bug with <mwc-switch>. We should set its display to inline-flex and that will fix it.

[asyncLiz]

I've added #1034 to track the switch alignment issue.

[Misiu]

@asyncLiz I'll check that and report back with the results.
Is the label position supported by mwc-fomfield? Similar to https://material.io/develop/web/components/input-controls/form-fields/#variants

This is the UI I'm trying to recreate: https://material.io/components/selection-controls/#switches

[asyncLiz]

You can use the alignEnd property to switch the position, but I don't believe there's a feature to add space between the two.

That seems like a reasonable feature request you could file on the MDC repo. A mdc-form-field--space-between class would achieve that.

[Misiu]

@asyncLiz should I also fill feature request here?
I'd like to have this functionality in web components.
Not sure how the FR flow looks like.
First Material Components Web, then Material Components Web Components?

[asyncLiz]

File it on Material Components Web and mention that the feature should be added to MWC as well.

You're welcome to make a second issue for more visibility on MWC 🙂

[Misiu]

We should probably remove the slot.

Any news about the slot? Will it get removed?

[asyncLiz]

Pretty sure it will be, but we haven't prioritized it specifically. In the meantime I would avoid using the slot since it's questionable whether or not it'll stick around.

[Misiu]

@asyncLiz any plans to release a new version? Fingers crossed 🤞
The last release was on 23 Mar, previous on 19 Mar and previous on 4 Feb.
I hope the next one is soon 🙂

[asyncLiz]

We should be discussing a release tomorrow, so I'd expect by the end of this week. In the meantime you can always use the @canary tag on npm to get the latest features.

[Misiu]

@asyncLiz thanks for the update. Didn't know about @canary tag :)

[asyncLiz]

Fixed in M3