Forum Discussion
CSS Properties being stripped from Teams Chat messages from Bot
Hi Team,
We've noticed that certain CSS properties are no longer appearing in HTML messages when sent to Teams Chat. Previously, our bot styled messages using display and border properties, but now these properties are missing from the HTML when we inspect the page.
Steps to Reproduce:
Start the Echo bot from the sample templates (I used Teams Toolkit to deploy it to Teams or run it in the Test tool).
In the TeamsBot.ts file, modify the onMessage function by replacing await context.sendActivity(...) with the following code.
This example adds styling to an echo message.
const a: Partial<Activity> = { text: `<span style="display: block; color: red; border-radius: 4px; padding: 4px; border: 1px solid red; ">Echoo:</span> <span style="display: block;">${txt}</span>`, textFormat: TextFormatTypes.Xml };
await context.sendActivity(a);
Note: I also tried sending the HTML directly with context.sendActivity(...) without setting the textFormat property in the Activity, and observed the same result.
Run the bot in the Test tool and Teams to compare behavior.
Observed behavior:
In the Test tool: All styles are applied as expected.
In Teams: Only the color property is applied, while display, padding, and border properties are ignored (stripped out of the HTML).
Here’s an example of the HTML output in Teams:
<div dir="auto" id="content-1730973548675" aria-label="Echoo: test styles properties" class="fui-Primitive ___16zla5h f1oy3dpc fqtknz5 fyvcxda">
<span style="color: red;">Echoo:</span> <span>test styles properties</span>
</div>
Could you provide insights on whether this change is intended, and if there are any workarounds for preserving these CSS properties in Teams messages?
Thank you!