Search code examples
jsonmicrosoft-teamsadaptive-cards

Adaptive cards in teams, can't get buttons to align in the center


I am creating an adaptive card where I have two buttons. These two buttons need to be aligned in the center with a little spacing between them. When I design the card through the App Studio Card editor I get the result that I want. However when I click "send me this card" the card displays different then the preview indicates. See picture #1 and #2. I have tried the following things:

  1. Use a column set with two columns containing a textblock and a desired Action. This does achieve it partially except the columns are just columns with text and not buttons and for the look & feel I want actual buttons.
  2. Created an Actionset containing two actions and tried to add a property called "horizontalAlignment" which appears to be an element indicated by the adaptive card designer. See picture #3 However when I use the exact same json the adaptive card designer generates for the Actionset, horizontalAlignment appears in the card editor as a non existent property for the actionset. See picture #4.

Any advice on how I can achieve my goal?

Desired result

Actual result

Adaptive Card designer Actionset

Card editor "horizontalAlignment" property

`

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": "auto",
              "items": [
                {
                  "size": "Medium",
                  "style": "default",
                  "type": "Image",
                  "url": "https://www.emerce.nl/content/uploads/2020/04/1200px-Microsoft_Office_Teams_2018%E2%80%93present.svg_.png"
                }
              ]
            },
            {
              "type": "Column",
              "width": "stretch",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "Microsoft Teams",
                  "weight": "bolder",
                  "wrap": true,
                  "size": "extraLarge",
                  "height": "automatic"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Informatie Teams",
          "weight": "Bolder",
          "wrap": true
        },
        {
          "type": "TextBlock",
          "text": "Microsoft Teams is een applicatie uit de Microsoft 365 suite, waarin je met jouw team kan communiceren en samenwerken. In onderstaande video krijg je een korte introductie van de mogelijkheden in Microsoft Teams. Microsoft Teams is ook beschikbaar op je mobiel of tablet. Wil je meer weten over een specifiek onderwerp? Vraag het mij! Ik zoek dan een video op, die dieper ingaat op het betreffende onderwerp.",
          "wrap": true
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Meer Info",
      "url": "https://support.microsoft.com/nl-nl/office/welkom-bij-microsoft-teams-b98d533f-118e-4bae-bf44-3df2470c2b12"
    },
    {
    "type": "Action.Submit",
    "title": "Feedback",
      "data": {
        "msteams": {
            "type": "messageBack",
            "displayText": "I clicked this button",
            "text": "text to bots",
            "value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
          } 
        }
    }
  ]
}

`


Solution

  • Currently in teams adaptive card it's not possible to align the buttons. we recommend you to raise a Teams UserVoice here if this needs to be consider as a future request.