Inline Style for sending chat message to team via api does not work

Yang 0

I am using this api
POST /chats/{chat-id}/messages

My code

	messageContent = ` <div style="color: #5d9e52; font-weight: bold;">This is a test</div>`;

	const chatMessage = {
		body: {
			contentType: 'html',
			content: `${messageContent}`
		},
		hostedContents: formattedAttachments,
		importance
	};

		const response = await ms.api(`/chats/${chatId}/messages`).post(chatMessage);

So this used to work on Nov 7th 2024 but now the inline style does not work and it only adds basic html content to the teams.

User's image

Any idea why this is not working anymore?

JimmyYang-MSFT 53,851 Reputation points Microsoft Vendor

2024-11-11T00:44:59.7933333+00:00

Hi @Yang

Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. Since your issue is more related to Teams API development, I will also add Teams development tag to your thread. Thanks for your understanding!
Prasad-MSFT 6,886 Reputation points Microsoft Vendor

2024-11-11T05:39:20.17+00:00

Thank you for your inquiry! We will try to repro this at our end and will revert back shortly.

1 answer

Prasad-MSFT 6,886 Microsoft Vendor

Yang we tried with this style (the one you tried) and the content rendered as below:

{
    "body": {
        "contentType": "html",
        "content": "<span style=\"color: #5d9e52; font-weight: bold;\">This is a test</span>"
    }
}

User's image

And on changing the style as below, the content rendered with coloured text but without bold.

{
    "body": {
        "contentType": "html",
        "content": "<span style=\"color: #5d9e52; font-weight: bold;\">This is a test</span>"
    }
}

User's image

Thereafter on further modification, we got the content rendering as desired i.e. coloured bold text.

{
    "body": {
        "contentType": "html",
        "content": "<span style=\"color: green; font-weight: bold;\">This is a test</span>"
    }
}

User's image

Yang 0 Reputation points

2024-11-11T18:04:39.17+00:00

Thanks for the response.
Was there update on Teams side where there was inline style modification?

Like the example you showed me span works but div does not work.

Div wrapper used to work fine since last Thursday.

Yang 0

<html><body>
        <div class="teams-ticket" style="display:flex; flex-direction: column; align-items: flex-start; padding: 10px; text-decoration: none;">
            <div style="display: flex;">
                <span
                    class="priority-badge"
                    style="height: 60px; width: 60px;padding: 20px; background-color: #5D9E52; margin-right: 10px;  text-align: center; align-items: center; display: flex; justify-content: center; color: white; font-size: 30px; font-weight: bold; border-radius: 10px;"
                >
                    3
                </span>
                <div class="subject" style="font-size: 20px; font-weight: bold;">
                    <div style="line-height: 20px"><a style="text-decoration: none; color: inherit; line-height: 25px;" href="link">test</a></div>

                    <div style="line-height: 12px; font-size: 12px; font-weight: normal;">Software Development Stage Hi</div>


                    <div style="font-size: 12px; font-weight: normal; line-height: 12px;">#12471 by Tiny Tim</div>

                </div>
            </div>
        </div>
    </body></html>

I have been playing around with this since div section does not work and only works on like span and p.

Seems like padding and border-radius does not reflect change in teams.

Wanted to know what inline styling can be used and not used.

Prasad-MSFT 6,886 Reputation points Microsoft Vendor

2024-11-12T07:11:27.2833333+00:00

Thanks for sharing this. We have reported this as a bug for further investigation. We will keep you updated as soon as we receive further information.

Share via

Inline Style for sending chat message to team via api does not work

1 answer

Your answer