CODEWITHSUNDEEP
angularmaterial-uiangular-material
user16799749
user16799749

Reputation:

Angular select list multiple selection with no checkbox not working properly

Im doing a list of selectable items and checkbox should not be visibile.

Demo : https://stackblitz.com/edit/mat-selection-list-get-options-gcsdjd?file=src%2Fapp%2Flist-selection-example.css,src%2Fapp%2Flist-selection-example.ts

Background field when items selected its not working properly

enter image description here

Upvotes: 0

Views: 668

Answers (2)

Telman
Telman

Reputation: 1487

I think what happens in your CSS is that mat-list-option:hover and mat-list-option:focus styles have higher specificity than your styles,

So whenever your list item is hovered or focused (it happens when you click on the item) you see the styles from mat-list-option:hover.

What you need to do is to make specificity of your styles higher, for example:

mat-list-option[aria-selected='true'],
mat-list-option[aria-selected='true']:hover,
mat-list-option[aria-selected='true']:focus {
  background: rgba(0, 139, 139, 0.7);
}

Or you can just add an additional class to your list items, and then use it in the CSS:

mat-list-option.list-item[aria-selected='true'] {
  background: rgba(0, 139, 139, 0.7);
}

And of course you can use important modifier as a last resort.

Upvotes: 0

Yozmo
Yozmo

Reputation: 581

In the example you don't do nothing in the onNgModelChange in which you should update your selected option

Upvotes: 0

Related Questions