hot plinth
This is my current CSS
mat-chip-listbox
width: 100%
::ng-deep
.mdc-evolution-chip-set__chips
display: flex !important
justify-content: space-evenly !important
mat-chip-option
flex: 1 1 0%
How can I get the same behavior when clicking on the part without text?
trim copper
Are you using the mat-mdc-chip-set-stacked? Because you shouldn't ned any of this ng-deep hackery (and it will get you in a lot of trouble).
hot plinth
Are you using the `mat-mdc-chip-set-stacked`? Because you shouldn't ned any of t...
The stacked option makes the empty space able to select the MatChip correctly, however I still need to customize MatChip but so far the main issue is fixed. I will update this post once I successfully achieve the desired result.
Thanks for the tip :)
trim copper
If you find you need to customize the components a lot, Angular Material might not be for you. Angular Material is designed to follow Material Design. Changing it will lead to trouble 😄
hot plinth
If you find you need to customize the components a lot, Angular Material might n...
Just needed to change the layout 😄
This CSS successfully meets my requirements
mat-chip-listbox
width: 100%
padding: $box-padding
::ng-deep
.mdc-evolution-chip-set__chips
display flex
flex-flow: nowrap
gap: $flex-gap
margin: 0
mat-chip-option
margin: 0
border-radius: $border-radius
trim copper
Yes, but this might break on any Angular Material update.
Your desired layout does not follow Material Design -> Angular Material is probably the wrong choice.
Just a word of warning.
There is an Angular App that I worked on that is currently stuck on Angular 14, because updating it to the new Angular Material breaks so much that it is deemed infeasible.
hot plinth
Just a word of warning.
There is an Angular App that I worked on that is current...
I see, as of now I have to quickly build a prototype displaying the frontend so I'm trying to write as less as possible custom components; thanks for the warning, I'll definitely come back to create my custom chip once the design is approved 😄
hot plinth
Just a word of warning.
There is an Angular App that I worked on that is current...
Perhaps you know how to fix this focus issue? After deselecting a Chip it appears as if it's being hovered
trim copper
It's focused