microsoft / microsoft/AdaptiveCards

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

Open
#9,265 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area-Renderers Bug
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

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.