AdaptiveCards icon indicating copy to clipboard operation
AdaptiveCards copied to clipboard

[Rendering] horizontalAlignment ignored when msTeams.allowExpand is true in Teams

Open MamoruKuroda opened this issue 3 months ago • 0 comments

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

  1. Send the following Adaptive Card JSON to a Teams chat.
  2. Observe that the first image (without msTeams.allowExpand) respects horizontalAlignment: "right".
  3. 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)

Image Image

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

MamoruKuroda avatar Sep 25 '25 03:09 MamoruKuroda