pnp / List-Formatting

List Formatting Samples for use in SharePoint and Microsoft Lists
https://pnp.github.io/List-Formatting/
MIT License
1.74k stars 833 forks source link

Random <br> tags in the output from JSON schema rendering? #617

Open exwhyz opened 1 year ago

exwhyz commented 1 year ago

I am using List formatting JSON to customize the Board view in Microsoft Lists in Microsoft 365. I have a description field/column set to Single line of text (which is a string without any HTML tags that I have validated with the Microsoft Graph API call to that List item). I am applying the following JSON formatting syntax to that field:

....
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary"
                },
                "txtContent": "=[$Description]"
            ],
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            }
          },
....

And the field renders fine except I am seeing <br> tags added by the JSON renderer, when I inspect the DOM via Chrome. For some fields the <br> tag is added in the middle of the text and for other multiple <br> tags are added at the end - see the 2 outputs below with the <br> tags introduced in the middle/end of the text. It appears the formatter is adding this unilaterally to space out the text thereby creating unnecessary white space.

Is there a way to control this behavior and force the JSON renderer to not apply any additional formatting besides what is specified in the JSON?

Output 1 (Note multiple <br> tags inside the <p> tag at the end of the text):

<div class="sp-card-displayColumnContainer">
    <p data-custom-card-path="#.0.1.0" data-event-trigger="hover" id="-1_#.0.1.0_undefined_0" data-is-focusable="true" class="ms-fontColor-neutralSecondary">
        Global Client Agreement for full review (Abacus Pharma)<br><br><br>
    </p>
</div>

Output 2 (Note the single <br> tag inside the <p> tag in the middle of the text):

<div class="sp-card-displayColumnContainer">
    <p data-custom-card-path="#.0.1.0" data-event-trigger="hover" id="-1_#.0.1.0_undefined_0" data-is-focusable="true" class="ms-fontColor-neutralSecondary">
        Request to seek approval and contract between Vendor and<br>Provider to support client.
    </p>
</div>