CODEWITHSUNDEEP
botframeworkadaptive-cards
Mayuresh Jaiswal
Mayuresh Jaiswal

Reputation: 349

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

Upvotes: 12

Views: 11516

Answers (4)

Hilton Giesenow
Hilton Giesenow

Reputation: 10804

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?

Edit: Please be sure see the other post on this page - there is now support for this in Teams (wasn't at the time of the original answer)

Upvotes: 1

Subba Reddi Tummuru
Subba Reddi Tummuru

Reputation: 569

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": [...]
}

Upvotes: 40

trallnag
trallnag

Reputation: 2376

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

Upvotes: 0

Md Farid Uddin Kiron
Md Farid Uddin Kiron

Reputation: 22447

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.

Upvotes: 2

Related Questions