FAQ Accordion - Question field not displaying correctly in Lists

[lara-g07]

FAQ Accordion

Hi, hoping you can help. I am using this sample: https://github.com/pnp/List-Formatting/tree/master/view-samples/faq-accordion

I have used the FAQ Accordion JSON code and although it displays correctly on my SharePoint site, when I view in Microsoft Lists the 'question box' is appearing condensed and narrow (taking up multiple lines), whereas on my SharePoint it spans out over the width of the page. Does anyone know why this is happening? The 'answer box' is displaying correctly, both in SharePoint and Microsoft lists. I am at a loss as to how to solve this, appreciate any advice. Screenshot attached, thank you.

[GentleToast]

We're also experiencing this issue - North America.

[L-Herman]

I had this issue as well and found going to add remove fields from view and uncheck title it then displayed as expected.

[lara-g07]

I had this issue as well and found going to add remove fields from view and uncheck title it then displayed as expected.

Thank you! I will try this also. Can I just confirm - is your "title" column empty? ie. do you have no information in the title column, and then the question in the "question" column? Thank you :)

[tecchan1107]

Hi @lara-g07 !

I have tried this in my environment and have confirmed the same phenomenon.

This was probably caused by some change in the Microsoft List specification.

And a similar problem was reported in the sp-dev-docs repository. https://github.com/SharePoint/sp-dev-docs/issues/9853

I tried the method described in the issue above of adding ”min-width“: ‘max-content’ and the layout is now correct.

The modified JSON is as follows.

JSON after modification

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "color": "black", "background-color": "#FAF9F9", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "auto", "margin": "1px 4px 4px 1px", "min-width": "max-content" }, "children": [ { "elmType": "img", "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "flex", "padding": "1px 8px 5px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "Answer", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "[$Answer]", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "center", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Show more", "attributes": { "class": "sp-row-button" }, "style": { "display": "=if([$ShowMore] == 'Yes', 'block', 'none')", "margin-bottom": "8px", "color": "white", "background-color": "#0077DB" } } ] } ] } } ```

When you have time, I would like you to try applying the above code and see if it solves the problem🙇‍♂️

[L-Herman]

Thanks tecchan1107! Can confirm this worked on my end with an adjustment to "min-width": "500px" since I wanted bars longer than the shortest question.

lara-g07- regarding your question with the title, yes title was not used in my solution. Regardless, I would recommend tecchan1107 solution, I actually just checked mine in another browser and it displayed crunched up. Thanks for posting this question though since I had also been trying to solution this since the last update rolled out.

[lara-g07]

Hello @tecchan1107

I can't thank you enough, confirming that I tried your suggestion of adding ”min-width“: ‘max-content’ and yes, this has solved the problem! Thanks so very much! It was frustrating me so much trying to work out what the issue was. Thank you so much for your help :)