Why does the width of adaptive cards in Microsoft Teams squish the message horizontally

1.4k views Asked by At

When posting adaptive cards to Microsoft Teams from Flow, the message appears to be squished to about 50% width. It doesn't expand to fit the message container in Teams.

Squished Adaptive Card

2

There are 2 answers

5
Nikitha-MSFT On

Current behavior is by design, however we have backlog item to support full width adaptive card. I'll keep this thread updated.

1
Christopher Cashell On

The "Full Width" Adaptive Card functionality was released at some point and is now available.

Microsoft has documentented how it works:

Constructing full width cards

To make a full width Adaptive card the width object in msteams property in the card content must be set to Full. In addition, your app must include the following elements:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}