Skip to content

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

@MamoruKuroda

Description

@MamoruKuroda

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions