Lists: group headers 100% width

Question

When formatting the group headers in a SharePoint list I found no way to span them dynamically over the full width of the list. The DIV container is

• as long as it's content or
• bound to a fixed width in pixels

Using width in % does not give any result.

My research brought up this link, but it only applies to gallery view not a normal list view.

My goal is to span the colored background over the full width of the list and respond to any changes in window width.

Answer 1

I was able to accomplish this with:

"style": {
  "position":"absolute",
  "left":"35px",
  "right":"0px",
  "top":"0px",
  "bottom":"0px"
  ...
}

The left 35px leaves room for the expand/contract button for the group.

Answer 2

Unfortunately, it is not possible to format group headers in list to span over the full width of the list.

JSON view formatting is applied by default to inner div element which is after expand/collapse (>) arrow and spans based on it's content and not for full width of the list.

Check this for reference to see where the full width div element is and where the actual JSON formatting will be applied:

Documentations:

1. Build custom group headers and footers
2. view-group-formatting

Similar thread: SharePoint format groupby over full width (group props headerformatter json)

Answer 3

Thanks to mastrdev's solution I was able to change the background color on the all width of the groupe header row except for the left 35 pixels. But after some text I succeed using this trick :

"style": {
  "position":"absolute",
  "left":"0px",
  "right":"0px",
  "top":"0px",
  "bottom":"0px"
  "padding-left":"35px",
  "z-index":"-1"
  ...
},
"attributes": {
  "class": "ms-bgColor-communicationTint20 ms-bgColor-communicationTint20--hover"
}

We all know that in reality, as shown by Ganesh Sanap we are not really changing the background color of the groupHeaderContainer itself but instead making the sp-field-customFormatter div child to be as large as its parent and cover it. But the result is equivalent or so close ;).

The last remaining issue on my side is the hover color effect that I would like to change (or cancel) like I did on the list rows, but sadly the trick of the class ms-bgColor-XYZ--hover with the same color has background doesn't work here. I think this is because the hover effect is attached to the groupHeaderContainer object and not to the sp-field-customFormatter object.

I hope my enhancement will help someone.