1

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.

enter image description here

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.

1
  • @mastrdev's answer should be accepted as it solves the problem. May 17 at 1:03

3 Answers 3

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.

0
1

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:

enter image description here

Documentations:

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

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.