search

finnhvman / matter

Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
MIT License
1.13k stars 85 forks source link

Alignment issue with Switch without text #10

Open nevf opened 5 years ago

nevf commented 5 years ago

When I have a matter-switch without any <span>_text_</span> the vertical position of the switch is moved way up as shown below.

image

Using a Space for text doesn't fix this and &nbsp; displays &nbsp;

I was actually trying to put the switch inside the button when I first saw this.

I assume checkbox's etc. have the same issue.

DevFelixDorn commented 5 years ago

+1 checkbox, radio had the same problem

finnhvman commented 5 years ago

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

nevf commented 5 years ago

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

nevf commented 5 years ago

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.

image

finnhvman commented 5 years ago

@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

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

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.

DevFelixDorn commented 5 years ago

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

nevf commented 5 years ago

@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: image 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?