MS Teams Adaptive Card max width

Question

I am creating an AdaptiveCard (and different types) for Teams (Azure Bot).

Could you tell me the Max Width size limitation, please?

Maybe there is "Best Practice" rules? Thank you.

Answer 1

According to my experience, I never found a 'Best practice' rules about AdaptiveCard width limitation.

I choose to use percentage to describe the width. But unfortunately, it still be affected by the width of the teams client. If keeping the client window maximizing, the AdaptiveCard will have a bigger size. If keeping the client window in a small format, the AdaptiveCard will have a smaller size.

We also need to think about different OS, different device and mobile endpoint.

Answer 2

You cannot change the width of adaptive card this is by design. However you can test and verify your card through card editor which is available in app studio and can post it to yourself to see the compatibility in various clients like web and windows.

Answer 3

The width is intentionally narrow on MS Teams on the desktop to better accommodate MS Teams on phones. Microsoft has decided that phone users are apparently more important than desktop users. As a result, they initially didn't allow you to change the width of an Adaptive Card. Their best practices are to keep in mind that display sizes may be narrow (phones) and that you should test for that and plan for it. They also note that narrow cards typically look acceptable on wider displays, but the reverse is not always true.

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

Microsoft has documented how to use it:

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"
}