7

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

Hilton Giesenow
  • 9,809
  • 2
  • 10
  • 24
Mayuresh Jaiswal
  • 297
  • 3
  • 21

4 Answers4

25

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": [...]
}
Subba Reddi Tummuru
  • 421
  • 4
  • 8
  • 2
    Works like a charm. I couldn't find the answer anywhere including MS documentation but this answer worked perfectly. This needs to be included in the docs. Thank you for your help! – Eliyah Mar 20 '21 at 18:46
  • 1
    This worked really great, You can add this object inside content block outside the body as below `"content": { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "msTeams": { "width": "full" }, "body": [ {} ]` – Mahesh G Mar 26 '21 at 06:18
  • 4
    BTW, this is documented here: https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cconnector-html#full-width-adaptive-card – Coatsy Apr 07 '21 at 04:50
  • 2
    FYI I don't know whether the api has changed so I'm not editing the answer, but as of 2023 and version 5 the 't' should not be capitalized in 'msteams' – Jason Goemaat May 27 '23 at 17:14
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:

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.

Md Farid Uddin Kiron
  • 16,817
  • 3
  • 17
  • 43
2

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?

Hilton Giesenow
  • 9,809
  • 2
  • 10
  • 24
  • I think it is exactly the point of an ADAPTIVE card framework to look good on different devices and be responsive. At least give us an option to allow containers inside a card to be distributed on the x axis as well – trallnag Oct 14 '20 at 22:33
0

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
trallnag
  • 2,041
  • 1
  • 17
  • 33
  • 2
    Link URL is broken (looks like domain expired or site went away). For reference, this is why copying/pasting more information is a good idea, so there is no dependency on external resources that may break over time. – Christopher Cashell Apr 28 '21 at 15:08