Adaptive Card horizontal alignment property to "Center" or "Right" is not working in MS Teams on iOS mobile app

Question

We have an issue with "Horizontal alignment" property in the following adaptive elements: AdaptiveColumn, AdaptiveTextBlock and AdaptiveImage. Setting this property to "Center" or "Right" causing major design issues(see the attached images).

Original:

"Right" alignment:

Here is the JSON:

{
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "Container",
      "items": [
        {
          "type": "ColumnSet",
          "columns": [
            {
              "type": "Column",
              "width": 15,
              "items": []
            },
            {
              "type": "Column",
              "width": 15,
              "items": [
                {
                  "type": "Image",
                  "url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-9-512.png",
                  "width": "30px",
                  "height": "24px"
                }
              ],
              "verticalContentAlignment": "Center",
              "selectAction": {
                "type": "Action.Submit",
                "title": "Previous"
              },
              "horizontalAlignment": "Left"
            },
            {
              "type": "Column",
              "width": 40,
              "items": [
                {
                  "type": "Image",
                  "size": "Large",
                  "url": "https://aboutflowers.com/wp-content/uploads/2016/10/AboutFlowers_S600Alstroemera_SymphonyMorita_Esmeralda.jpg",
                  "horizontalAlignment": "Center"
                }
              ]
            },
            {
              "type": "Column",
              "width": 15,
              "items": [
                {
                  "type": "Image",
                  "url": "https://cdn4.iconfinder.com/data/icons/arrows-9/100/arrow-10-512.png",
                  "width": "30px",
                  "horizontalAlignment": "Right",
                  "height": "24px"
                }
              ],
              "verticalContentAlignment": "Center",
              "selectAction": {
                "type": "Action.Submit",
                "title": "Next"
              }
            },
            {
              "type": "Column",
              "width": 15,
              "items": []
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Image1",
      "horizontalAlignment": "Center"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

The same design works properly on Android and Desktop client.

Answer 1

Stack Overflow is not for bug reports. You can submit feedback through the Teams app itself or you can have a look at this feedback page: https://learn.microsoft.com/en-us/microsoftteams/platform/feedback

If you do submit feedback, feel free to link to this Stack Overflow post in order to provide the necessary information.

Until the bug is fixed, you will need to find some kind of workaround. Perhaps you can try the "center" alignment instead of left and right. If that doesn't work then you may have to not use any alignment. You may be interested to know that the schema mentions the possibility of image distortion when using the height property, so you might also try omitting width and height specifications: https://adaptivecards.io/explorer/Image.html