CODEWITHSUNDEEP
botframeworkmicrosoft-teamsadaptive-cards
imfantom
imfantom

Reputation: 21

MS Teams Adaptive Card max width

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.

Upvotes: 1

Views: 2282

Answers (3)

Christopher Cashell
Christopher Cashell

Reputation: 800

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

Upvotes: 4

VaraPrasad-MSFT
VaraPrasad-MSFT

Reputation: 93

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.

Upvotes: 0

Tiny Wang
Tiny Wang

Reputation: 15906

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.

Upvotes: 0

Related Questions