Best practice for hide / show icon while maintaining layout spacing

[Kevin Malakoff]

I'm using React with Semantic UI which makes it really easy to not render icons in a hidden state (you just don't render the tag). 

Unfortunately, sometimes the layout spacing will change when the icon is hidden / not rendered. Some examples:

1) in a small table in a row with an icon, there can be a small row height change with and without the icon tag

2) in a list item with and without a right-floated icon

3) in a narrow sortable table header with no sorting caret will be more narrow than when there is sorting causing column resizing

I think the problem is that icons are different sizes so it might be hard to generalize the hidden state for multiple icons in the same location, but assuming one icon only with shown or hidden, what is the best way to hide an icon in Semantic UI to maintain layout spacing?

[Kevin Malakoff]

I forgot to mention, I'm interested in both: 1) toggling the visibility of icons and 2) starting them invisible and showing them on hover.

[Kevin Malakoff]

OK. I found a solution: 

i.hidden.icon {

  &:before { opacity: 0; }

}

i.hover.visible.icon {

  &:before { opacity: 0; }

  &:hover:before { opacity: 1; }

}

Is this something that already is or should be bundled with Semantic UI?

[Jack Lukic]

Some icons are slightly larger than 1em which changes the baseline when you show/hide the icon. You can typically fix the line height jump by using `vertical-align: top;` on the icon. 

--
You received this message because you are subscribed to the Google Groups "Semantic UI" group.
To unsubscribe from this group and stop receiving emails from it, send an email to semantic-ui...@googlegroups.com.
To post to this group, send email to seman...@googlegroups.com.
Visit this group at http://groups.google.com/group/semantic-ui.
For more options, visit https://groups.google.com/d/optout.