Material-ui: Chip element goes full-width in MS Edge

Created on 26 Dec 2017 · 9Comments · Source: mui-org/material-ui

[x] I have searched the issues of this repository and believe that this is not a duplicate.

When using the Chip element, behavior differs in browser. While in Chrome it has width calculated based on label and avatar, in MS Edge the element is 100% width. I did a CodeSandbox snippet to reproduce it.

Expected Behavior

The Chip should be as narrow as its content, like it does in Chrome

Current Behavior

On MS Edge (versions: Microsoft Edge 41.16299.15.0; Microsoft EdgeHTML 16.16299) the Chip element is full width

Steps to Reproduce (for bugs)

CodeSandbox snippet
Add a Chip element to App
The rendering differs in Chrome and Edge
Wrapping Chip with inline-flex container (e.g. Badge or custom div) fixes an issue.

Context

I'm rendering a statistic page, where Avatar shows ID and label displays aggregation data. I show each chip on new line (in a narrow Grid element) so it's not a big problem, but in this case Avatar is not left-most.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.24 |
| React | 16.2 |
| browser | Edge |
| Microsoft Edge | 41.16299.15.0 |
| Microsoft EdgeHTML | 16.16299 |

bug 🐛 Chip good first issue

Source

IBestuzhev

Most helpful comment

@oliviertassinari I discovered this fix as I have some Chips wrapped in Badge. But looks like it works even if applied to Chip itself, without wrapping:

<Chip label="Fix no wrapped" avatar={<Avatar>{3}</Avatar>} style={{display: "inline-flex"}} />

I think it's OK. The chip element is inline by design, so this solution looks natural.
I hope it does not break other cases.

IBestuzhev on 27 Dec 2017

👍2

All 9 comments

Cc @mbrookes

oliviertassinari on 26 Dec 2017

I take a look at styles and see that Chip Element has width: fit-content. But intrinsic-width properties are not supported by MS: caniuse and Edge dev site. It's under consideration with low priority.

IBestuzhev on 26 Dec 2017

👍1

@IBestuzhev Good catch, then we gonna have to remove this style:
https://github.com/mui-org/material-ui/blob/701c97295617ca028ae6a4da1d9fe3f07c3cfacb/src/Chip/Chip.js#L27

oliviertassinari on 26 Dec 2017

@IBestuzhev What do you think of removing fit-content and using display: inline-flex? I do think that it should be the default behavior given the context the component will most likely be used in.

oliviertassinari on 27 Dec 2017

@oliviertassinari I discovered this fix as I have some Chips wrapped in Badge. But looks like it works even if applied to Chip itself, without wrapping:

<Chip label="Fix no wrapped" avatar={<Avatar>{3}</Avatar>} style={{display: "inline-flex"}} />

I think it's OK. The chip element is inline by design, so this solution looks natural.
I hope it does not break other cases.

IBestuzhev on 27 Dec 2017

👍2

@IBestuzhev Do you want to submit a pull-request to update the implementation?

oliviertassinari on 27 Dec 2017

No, I don't have any changes to material-ui code at the moment. I just did some checks on Code Sandbox.

IBestuzhev on 27 Dec 2017

@IBestuzhev The question was, do you want to apply that change to Chip and submit a PR?

mbrookes on 28 Dec 2017

Not really, I don't feel myself skilled enough to provide the correct
tests for this.

On Thu, Dec 28, 2017, 05:10 Matt Brookes notifications@github.com wrote:

@IBestuzhev https://github.com/ibestuzhev The question was, do you want
to apply that change to Chip and submit a PR?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/9615#issuecomment-354220202,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAQz7edBBYv3SiK8DxUnNFYCqbWu-Z_gks5tEwaQgaJpZM4RMoPk
.