Increase the width of Adaptive Card for MS Teams channel

Question

I have an Adaptive Card with 4 buttons on it, but the issue is that my 4th button is going over to the next line. I want to fit all the buttons in a single row, so is there any way i can increase the width of the Adaptive Card to align the buttons in a row.

I'm using bot framework v3 (C#).

Answer 1

Add the below property to adaptive card to set the width to use the full window.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "msTeams": { "width": "full" },
    "body": [...]
}

Answer 2

Unfortunately, you cannot align your button side to side at this moment. For button there is not such a property

. As you can see below:

Though you could align other element like Input.Text or TextBlock inside ColumnSet but it doesn't support button inside.

See the screen shot below:

You could have a look more about adaptive card property here .

Answer 3

The other answer is correct, afaik you can't increase the width of the adaptive card. Bear in mind, even if you could, it would give problems across devices - like it might fit fine on a desktop, but would give issues on a phone. As an alternative solution, can you logically split your buttons into two groups somehow (depending on what they do) and perhaps split them over two lines explicitly?

Answer 4

The feature is coming soon to MS Teams. See here for reference: https://www.msfttoday.com/microsoft-teams-community-call-september-15-2020/

Features coming soon include:

• Full Width Adaptive Cards
• Information Masking
• Overflow Menu