CSS box sizing issues when using normalize.css

[cgwyllie]

We encountered an issue with SvgIcon when using a reset stylesheet which sets box-sizing: border-box globally.

EDIT: we are using the rightIcon prop of the ListItem, which adds a padding to the icon

The reset uses the inherit technique described here: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

However, SvgIcon seems to depend on being laid out with box-sizing: content-box for its layout to function properly (see attached files).

ActionBackup with border-box

ActionBackup with content-box

So far only icons seem affected, but there could be other components depending on content-box that we haven't used.

I'd love to hear some feedback about this. Is it considered an issue, should Material UI play nice with CSS libraries?

For now we can work around it by giving all SVGs content-box, but perhaps we should rather patch the SvgIcon component to explicitly declare the box model it needs if this is a wider issue.

Happy to put a PR together but could use some feedback first.

Thanks,
Chris

[alitaheri]

@cgwyllie Thanks for reporting this.

@oliviertassinari This is somehow critical i think, we should fix it before 0.14.0, it will be trivial. What do you think?

[oliviertassinari]

This issus is mysterious to me.
I can't see any margin or border in the implementation of the SvgIcon component https://github.com/callemall/material-ui/blob/master/src/svg-icon.jsx.
Any idea where this is from?

[cgwyllie]

@oliviertassinari Ah, sorry, I forgot to mention we encountered this when using a ListItem and setting its rightIcon prop. Appears it's a padding that is applied from https://github.com/callemall/material-ui/blob/master/src/lists/list-item.jsx#L172 that causes the layout issue.

[cgwyllie]

In this case where it is the parent component introducing padding, should it have the box model explicitly set there instead?

[alitaheri]

@cgwyllie Please take a look and see if #2633 fixes it.

[alitaheri]

@oliviertassinari I think this is safe to close

[cgwyllie]

Yeah, sorry -- haven't tested it, but looks like the PR should work.

Thanks :)

On 23 December 2015 at 22:06, Ali Taheri Moghaddar <[email protected]

wrote:

@oliviertassinari https://github.com/oliviertassinari I think this is
safe to close

—
Reply to this email directly or view it on GitHub
#2481 (comment)
.

[oliviertassinari]

@cgwyllie Thanks for responding 💯

[calbertts]

Hi guys,

I've been trying to figure out a way to decrease the fontSize to all the components set, they are too big for my taste, so I started creating a selectable list and using styles trying to decrease the fonts and sizes but I'm seeing isn't that easy.

I've started with List and ListItem, I was able to reduce all the elements except the rightToggle element, I'm not seeing a way to override its style.

Also I couldn't change the secondaryText font size.

Is there an specific approach to achieve this without to much pain?, I'm seeing there are a lot of "magic" numbers hardcoded for the paddings and positioning, wouldn't be better make them overridable?

Thanks