material-web: mwc-switch ripple is causing unwanted scrollbars (switch without text)
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:
- Go to https://stackblitz.com/edit/material-web-components-8nfuqy?file=components%2Fdemo-mwc-switch%2Fdemo-mwc-switch.js
- Click on the hamburger menu and choose mwc-switch
- Click on switch for Lisa or Bart
- 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: https://github.com/home-assistant/frontend/issues/5084
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 16
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
@canarytag on npm to get the latest features.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.
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.