SharePoint Dashboard Visual Issues

Question

Have developed a dashboard in SharePoint using Microsoft Lists for stakeholder project reporting which is viewable both in Microsoft Edge and in the related Teams channel. As of a few days ago, the Teams channel view appears to have stopped rendering most html markup in the Dashboard - as such, we have a multi-line text field for project updates that now has sentences that run one after another with no line break, which is visually difficult to parse. This only affects the Teams view - looking at the Dashboard in an internet browser shows text with appropriate line breaks after each paragraph.

The only way I have been able to re-implement line spacing is through <margin-bottom> tags - but having to redo almost 200 projects to including this specific formatting per line break is a significant body of work. Are there any solutions so the browser and Teams views can match (ie; the current line breaks and spacing can be retained in Teams)?

Answer 1

Hi @Schwass, Dale

Based on the information you provided, I understand that you have built a project reporting dashboard using Microsoft Lists that is accessed both via Microsoft Edge and embedded within a Microsoft Teams channel. Recently, the Teams channel view stopped rendering standard HTML markup properly within a multi-line Rich Text field. This causes your project updates to run together into a single dense wall of text without paragraph breaks, even though the exact same list still displays perfectly fine with proper line spacing when viewed directly in a web browser.

After looking into this behavior, when a SharePoint List is embedded as a tab inside Teams, it does not run on the exact same full browser rendering engine. Instead, Teams processes the list through a specialized iframe framework that applies stricter HTML sanitization, security filtering, and Markdown-focused rendering policies. A recent backend update to this Teams component has likely caused it to strip out or ignore standard paragraph (<p>) or div-based spacing markup that standard browsers natively support.

Since manually updating nearly 200 projects with inline <margin-bottom> CSS fixes is a massive, unsustainable body of work, here are the most effective structural solutions to get the Teams and browser views matching again:

Teams' restricted renderer often ignores structural block-level elements like paragraph tags but will consistently respect basic line-break tags like <br> or <br />.

Rather than editing 200 items manually, you can create a simple, one-time Power Automate cloud flow to convert your existing spacing. Set the flow to loop through all 200 items in your Microsoft List, use a string replacement expression to automatically swap out the unsupported paragraph/spacing tags with standard <br><br> tags, and update the items. This ensures text line breaks look identical and professional across both Microsoft Edge and the Teams tab interface.

If your dashboard utilizes custom list layouts, I recommend handling structural UI designs using JSON Column or View Formatting rather than relying on inline HTML inside Rich Text fields.

You can inject a clean JSON layout configuration directly into your multi-line text column settings. By using the txtContent and style blocks within SharePoint JSON formatting, you can force Teams to apply the correct layout wrappers and padding. JSON definitions are natively interpreted by the SharePoint Framework (SPFx) layer that Teams uses, allowing you to bypass the web-browser-specific HTML parsing filters entirely.

Note: Because Microsoft Teams constantly rolls out UI updates, I highly recommend creating a duplicate "Test List" with 1 or 2 sample projects first to test both the <br> tags and the JSON formatting inside your Teams tab before running any automated updates across your active production data.

I hope this information help.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".  

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Teams and the browser are using different rendering engines, and recent changes mean that some HTML/inline styling which works in the browser view of a SharePoint list no longer renders the same way inside the Teams tab. In particular, relying on raw HTML markup in list fields is not a supported pattern and can break or change behavior over time.

In supported scenarios, line breaks in SharePoint list multi‑line text fields are stored as paragraph (<p>) or <br> tags and rendered by the client. The behavior described is similar to other cases where HTML or custom markup is handled differently across experiences. For example, SharePoint’s rich‑text editor uses paragraph tags for Enter and <br> only for Shift+Enter, which leads to different spacing behavior depending on the editor and client.

Given the current behavior, there is no supported way to force Teams to render arbitrary HTML in list fields so that it exactly matches the browser view without reformatting the content. The only reliable options within supported boundaries are:

1. Avoid relying on custom HTML markup in list fields for layout and spacing.
2. Use standard line breaks entered via the editor (for example, Shift+Enter for single line breaks where applicable) and accept that Teams and browser may render spacing slightly differently.
3. If the list form or view has been customized (for example, via classic customization or unsupported markup), consider recreating the form/view or using Power Apps for a fully controlled, supported layout that will render consistently across clients.

There is no supported bulk “auto‑fix” that will retroactively convert existing HTML‑based spacing into something Teams will render identically to the browser without touching the items.

---

References:

• Additional line breaks when pressing the ENTER key while formatting in the Rich-Text Editor in SharePoint
• Handling HTML markup in SharePoint calculated fields
• Add a SharePoint page, list, or document library as a tab in Teams