microsoft / microsoft/AdaptiveCards
[Rendering] horizontalAlignment ignored when msTeams.allowExpand is true in Teams
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
Description
Target Platforms
Other
SDK Version
N/A
Application Name
Microsoft Teams
Problem Description
horizontalAlignment ignored when msTeams.allowExpand is true in Teams
Hi team,
I’d like to reopen this issue because we are still seeing the same behavior in Microsoft Teams.
When an Adaptive Card Image element includes "msTeams.allowExpand": true, the horizontalAlignment property is ignored and the image is left-aligned. This does not reproduce in the Adaptive Cards Designer (https://adaptivecards.microsoft.com/designer.html), so it appears to be specific to the Teams client.
- Reproducible in: Teams desktop and Teams web
- Teams client version:
25241.203.3947.4411 - Not reproducible in: Adaptive Cards Designer
Steps to Reproduce
- Send the following Adaptive Card JSON to a Teams chat.
- Observe that the first image (without
msTeams.allowExpand) respectshorizontalAlignment: "right". - Observe that the second image (with
msTeams.allowExpand: true) is left-aligned.
Expected Behavior
Both images should render right-aligned when horizontalAlignment: "right" is specified.
Actual Behavior
Only the image without msTeams.allowExpand is right-aligned. The image with msTeams.allowExpand: true is left-aligned.
Sample Card JSON
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"id": "1",
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat",
"size": "medium",
"horizontalAlignment": "right"
},
{
"id": "2",
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat",
"size": "medium",
"horizontalAlignment": "right",
"msTeams": {
"allowExpand": true
}
}
]
}
}
],
"summary": "test"
}
Hypothesis
To enable image expansion, Teams wraps the image in a button element and additional markup. This wrapper seems to override or interfere with the horizontalAlignment behavior.
Questions
- Is this a known issue with the Teams Adaptive Cards renderer?
- If yes, is there a fix or workaround available?
- If not, could you confirm whether this is by design or a bug?
Thanks for your help!
Screenshots
Observed DOM (excerpt)
Card JSON
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"id": "1",
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat",
"size": "medium",
"horizontalAlignment": "right"
},
{
"id": "2",
"type": "Image",
"url": "https://adaptivecards.io/content/cats/1.png",
"altText": "Cat",
"size": "medium",
"horizontalAlignment": "right",
"msTeams": {
"allowExpand": true
}
}
]
}
}
],
"summary": "test"
}
Sample Code Language
No response
Sample Code
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The report provides no repository file, test, or entry point. Start by locating the Teams-specific rendering path for Image and the handling of msTeams.allowExpand, then reproduce the supplied card JSON in Teams desktop or web. Done means horizontalAlignment: "right" is respected for both images.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100