2

i took a look at the fluent detailsList grouped example in the official page of fluentUI: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/grouped

and edited their example a bit so some of the groups has 1 row

now when I select the item in the row the group row (the group title) is also selected enter image description here

I want to prevent that. is there a way?

No Idea For Name
  • 11,411
  • 10
  • 42
  • 70

1 Answers1

2

A quick workaround would be doing it by CSS:

if an element has ms-GroupHeader is-selected classes, means it is a gruop header and also is selected, so you change set the background-color.

You probably can pass a className to group components like this

c0m1t
  • 1,089
  • 1
  • 7
  • 16
  • thank you, we ended up doing: .is-selected.ms-GroupHeader{ background: none!important; } so if you want to edit your answer i'll accept it – No Idea For Name Jan 11 '21 at 09:28
  • 1
    @NoIdeaForName I did not say to use `ms-GroupHeader is-selected` as a css selector (I was not clear enough). What I meant was if an element has those two classes, which translates to `.is-selected.ms-GroupHeader` selector, is an element you want to override its styles. But be careful, using that selector will affect all of your group headers, so you may want to pass a custom class to have more control over what to be affected or not (As you see in codepen). Also you can probably avoid that `!important`. Glad it was helpful. – c0m1t Jan 11 '21 at 14:14