Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Increase the width of Adaptive Card for MS Teams channel

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#).

like image 538
Mayuresh Jaiswal Avatar asked Jan 14 '20 05:01

Mayuresh Jaiswal


People also ask

How do you increase the width of an adaptive card?

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": [...] } Works like a charm.

How do you make adaptive cards in Microsoft teams?

Select Create. Select New Step. Search for Microsoft Teams, and then select Post an adaptive card to a Teams channel and wait for a response as the action. Select the Team and the Channel to which you'd like to post the card.

Do Adaptive cards work in teams?

Adaptive Cards are actionable snippets of content that you can add to a conversation through a bot or message extension. Using text, graphics, and buttons, these cards provide rich communication to your audience. The Adaptive Card framework is used across many Microsoft products, including Teams.

What version of Adaptive cards Does teams support?

Support for Adaptive Cards Teams platform supports v1. 4 or earlier of Adaptive Card features for bot sent cards and action based message extensions.


2 Answers

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": [...]
}
like image 160
Subba Reddi Tummuru Avatar answered Sep 21 '22 10:09

Subba Reddi Tummuru


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:

enter image description here

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:

enter image description here

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

like image 38
Md Farid Uddin Kiron Avatar answered Sep 20 '22 10:09

Md Farid Uddin Kiron