Skip to content

List view formatting issue with grouped column - no longer wraps properly #10315

@corriespondent

Description

@corriespondent

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

Declarative list formatting

Developer environment

Windows

What browser(s) / client(s) have you tested

  • 💥 Internet Explorer
  • 💥 Microsoft Edge
  • 💥 Google Chrome
  • 💥 FireFox
  • 💥 Safari
  • mobile (iOS/iPadOS)
  • mobile (Android)
  • not applicable
  • other (enter in the "Additional environment details" area below)

Additional environment details

No response

Describe the bug / error

We have been using a grouped view with list formatting applied to create an FAQ view with expandable/collapsible headers. Since the new Microsoft List updates in SharePoint lists, the list views are no longer responsive when the list web part is added to a page. A horizontal scrollbar gets added.

Image

Updated to add - this is better than what it was before, where the header was showing like this:

Image

The suggested fix at pnp/List-Formatting#839 was to add a min-width: max-content; I forgot I still had that in my demo code before, so I've updated to remove it. I can see that the cf-group-header element now has this min-width style applied, but it means that the content isn't responsive.

Steps to reproduce

  1. Create a SharePoint list with the following columns: Title (single line of text), Answer (multiple lines of plain text), Category (Choice with options e.g. HR, IT, Marketing), Link (hyperlink)
  2. Create a list view which shows only Answer and Link columns, is sorted by Title, and is grouped by Title
  3. Format the view with code below.
  4. Add the list web part to a page and configure to point to the FAQ list and the formatted view.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "txtContent": "@group.fieldData",
      "attributes": {
        "class": "sp-row-title ms-fontSize-xl"
      }
    }
  },
  "additionalRowClass": "ms-font-l ms-fontColor-neutralPrimary ms-bgColor-white--hover",
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "block",
      "margin-left": "36px",
      "padding": "10px"
    },
    "children": [
      {
        "elmType": "p",
        "attributes": {
          "class": "ms-fontColor-neutralPrimary"
        },
        "txtContent": "[$Answer]"
      },
      {
        "elmType": "p",
        "attributes": {
          "class": "ms-fontColor-neutralPrimary"
        },
        "style": {
          "margin-bottom": "1em"
        },
        "children": [
          {
            "elmType": "a",
            "attributes": {
              "href": "[$Link]",
              "class": "ms-fontColor-themePrimary"
            },
            "txtContent": "[$Link]",
            "style": {
              "font-size": "16px"
            }
          }
        ]
      }
  
    ]
  }
}

Expected behavior

The list view on a page used to work perfectly for this application, with the view being responsive. I would expect the view to be responsive for grouped headers.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions