-
Notifications
You must be signed in to change notification settings - Fork 1k
Description
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.
Updated to add - this is better than what it was before, where the header was showing like this:
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
- 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)
- Create a list view which shows only Answer and Link columns, is sorted by Title, and is grouped by Title
- Format the view with code below.
- 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.