Components: Input chips overflow input container with long unwrappable text (no longer removeable by click)

[yoonjesung]

What is the current behavior?

In the current version of material (7.2.2), if a chip contains a long string that cannot be wrapped which ends up overflowing the container of the chip, the removeable button is no longer viewable. (The chip is still removeable if selected and removed using the backspace keyboard input though). See screenshot below for example from the material.angular.io site (last input item).

Proposing that either the text be force wrapped or truncated, or an option to choose between the two.

[crisbeto]

This can be fixed by adding a word-break to the chip styles, however the paddings will look off, because we have height: 1px to work around another issue. We should be able to fix this issue once https://github.com/angular/material2/issues/13962 is merged in.

[adripanico]

One quick semi-fix is to apply

position: absolute;
right: 9px;

to the mat-icon element inside mat-chip. This way, we will get the icon visible:

The result is ugly since the icon keeps over the text and it is hard to see it, but at least we can remove the chip.

To really fix it, Angular Material should create a second div inside the mat-chip element in order to be able to hide the overflowed text before reaching the remove icon.

A second approach is to apply

position: absolute;
right: 9px;
background-color: #e0e0e0;
opacity: 1 !important;
color: #929292 !important;

to the mat-icon element, so we get:

But... this also affects to short chips, so not a good option.

[rikkiprince]

Putting the text of the chip inside a <span> would allow the text to be styled as appropriate.

Is there a reason the text wasn't put in its own element? I could do a pull request for that.

[rikkiprince]

I've just realised that I can put a <span> around the text when putting the mat-chip-list in my own page. I guess I can appropriately style it from there.

[lancelot-c]

Here is a code that worked for me :

<mat-chip *ngFor="let category of categories" class="category-chip">
    <div class="category-chip__text"> {{category}} </div>
    <mat-icon matChipRemove> cancel </mat-icon>
</mat-chip>

where categories is an array of string
with

.category-chip.category-chip.category-chip { // repeated 3 times to override the Angular Material default styling
    width: fit-content;
    max-width: 100%;
}

.category-chip__text {
    width: calc(100%); // calc is important here, do not use "100%" alone
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[connormulcahey]

Landed here from google top result, but above didn't work for me.

Here is what did:

mat-chip.my-class {
  height: auto; // overrides default height 1px
  line-height: 1.1em; // keeps chip from "squaring out" at one line
}

Result: