CODEWITHSUNDEEP
jsonmicrosoft-teamsadaptive-cards
Rob Pijnenburg
Rob Pijnenburg

Reputation: 83

Is there a way to properly align an image and text in adaptive card for Teams using columnset?

For the teams bot we created we use adaptive cards to show search results and information for contacts. The problem that occurs is that the styling is incorrect. When we attempt to align an image with some text it does not align correctly. When I try the online designer with the "Microsoft Teams - Light" setting, it looks perfect, but in Teams with the same json the alignment does not come out the same. Any useful tips for resolving this are welcome.

For displaying contact information, like phone numbers, I'm currently using a columnset with an image in the first column and the phone number in the second.

In teams it looks like:

enter image description here

The online sample shows:

enter image description here

The images for the phonenumber are much bigger in Teams and the text is not properly aligned while the online demo suggests it should workt. Below the json used.

JSON used:

{
  "type": "ColumnSet",
  "columns": [
    {
      "type": "Column",
      "width": "auto",
      "items": [
        {
          "type": "Image",
          "url": "https://****/Assets/Icons/WorkPhone.png"
        }
      ]
    },
    {
      "type": "Column",
      "width": "stretch",
      "items": [
        {
          "type": "TextBlock",
          "text": "+31612345678"
        }
      ],
      "verticalContentAlignment": "center"
    }
  ],
  "selectAction": {
    "type": "Action.Submit",
    "data": {
      "PhoneNumber": "+31612345678",
      "Action": "CallSearchResult"
    },
    "title": "callsearchresult"
  }
}

It seems like Microsoft Teams is rendering it different or the styling is wrong. Any help or explanation would be appreciated. Thanks in advance.

Upvotes: 1

Views: 2610

Answers (1)

Kyle Delaney
Kyle Delaney

Reputation: 12284

Unfortunately, Microsoft Teams currently only supports Adaptive Cards 1.0 and verticalContentAlignment was introduced in 1.1. The Adaptive Cards designer does not include the ability to specify the version or to only include elements and properties that are available in the chosen platform. There is not much you can do about this, but here are some ideas.

Option 1

If you want to add your voice to the list of customers demanding more up-to-date Adaptive Card support, feel free to post on the GitHub page or the feedback forum.

Option 2

It looks like the problem is exacerbated by your image having empty space at the top:

enter image description here

If you crop the image it will probably look a little better.

Option 3

You could push the text down a bit by including a TextBlock above it (with white space):

{
  "type": "TextBlock",
  "text": " "
},
{
  "type": "TextBlock",
  "text": "+31612345678"
}

Adaptive Card

This is a bit of a gamble because it won't necessarily look right in all clients (desktop vs mobile, etc.)

Option 4

If you really wanna get the right look right now, you might consider just baking the phone number into the image so you don't need a text block or even a column set. I guess it's okay that it can't be selected as text and copied since it looks like you're already using a select action that will send the number to the bot automatically. In fact, if you're doing that then it's probably better to not have the text selectable anyway since it can be annoying for a user to try to select text and click a button accidentally.

Upvotes: 1

Related Questions