New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Input chips overflow input container with long unwrappable text (no longer removeable by click) #14934
Comments
This can be fixed by adding a |
One quick semi-fix is to apply
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
to the mat-icon element, so we get: But... this also affects to short chips, so not a good option. |
Putting the text of the chip inside a Is there a reason the text wasn't put in its own element? I could do a pull request for that. |
I've just realised that I can put a |
Here is a code that worked for me :
where
|
Thanks @lancelot-c , it worked perfectly for me :) |
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.
The text was updated successfully, but these errors were encountered: