Alignment issue with Switch without text about matter HOT 7 OPEN

+1 checkbox, radio had the same problem

from matter.

@nevf @DevFelixDorn I see, I'll look into it.

from matter.

@finnhvman Thanks. text should be optional for all of these.

from matter.

I've got a switch without any text inside an <a> element and see a weird focus? outline when the <a> has focus. I assume this is related to my original issue.

from matter.

@nevf @DevFelixDorn The Matter Switch, Radio, and Checkbox components rely on the same html structure, the root cause is basically the same for all these.

As far as I understood it's related to the vertical-align property having the baseline the default value (CSS Spec). The outer-most wrapping element of these controls is the . In case there's text in the label, the baselines of the label and sibling controls are aligned well, if there's no text in the label it gets messed up.

One solution I can suggest is using a Zero-Width Space as text like <span>&#8203;</span>.

The other solution could be me adding vertical-align: middle; to the of these controls, but that would mess up the nice baseline alignment in case of texts.

What are your use cases for these controls without text?

@nevf The weird focus issue is probably the browser figuring out a combined outline of all the children elements of the anchor. In case of the Switch it's the pseudo element used for the ripple that causes the irregularity. You know, the growing and fading blue circle when you switch the switch. I can't really get around this issue, because of the CSS-onliness.

Although, I have to ask, why are you putting a Switch inside of an anchor?

According to HTML Specification it's not permitted (and it's not good UX):

Permitted content | Transparent, containing either flow content (excluding interactive content) or phrasing content.

from matter.

I need only a switch without span when I had a more complex layout which require some complex flexbox/grid. It's happened not really often but it's happened ¯_(ツ)_/¯
I don't put input in anchor elements

from matter.

@finnhvman Ben I'm using switch and checkbox in menu and tree items where the text is not part of the switch/checkbox. Further there are areas where I just use an icon + switch/checkbox with no text.

This screen shot shows examples of both:

A menu item/row is an <a> with text, links, switch/checkbox inside it. I'll look at revisiting using an anchor for this type of menu item.

Would having two variations of switch/checkbox etc. be the solution, one with the text <span> and one without?

Would the latter resolve my focus issue?

from matter.