Adaptive Cards are not showing up in Mobile Teams

[nagajeyanthi]

Hi, 

We have designed the adaptive card, it works in Desktop without any issues but with Mobile teams we are getting blank, and also sometimes the buttons are displayed as tiny and hard to click

Let us know what is the issue and when it will be fixed.

[#2]

@nagajeyanthi - Could you please provide the Card JSON which you are using?

[#3]

@Prasad_Das-MSFT 

As per the request, here is the Card JSON and let me know if anything is required furthermore.

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Here's your most recent requests",
      "wrap": true,
      "weight": "Bolder",
      "horizontalAlignment": "Center",
      "size": "Large",
      "color": "Default"
    },
    {
      "type": "Image",
      "url": "https://www.colorhexa.com/f9a31c.png",
      "width": "1000px",
      "height": "10px",
      "horizontalAlignment": "Right"
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Container",
              "items": [
                {
                  "type": "ColumnSet",
                  "columns": [
                    {
                      "type": "Column",
                      "width": "stretch",
                      "items": [
                        {
                          "type": "Container",
                          "items": [
                            {
                              "type": "TextBlock",
                              "text": "${title}",
                              "weight": "Bolder",
                              "color": "Dark",
                              "horizontalAlignment": "Center"
                            }
                          ],
                          "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                              "action": "ticket",
                              "id": "${value}"
                            }
                          },
                          "minHeight": "50px",
                          "verticalContentAlignment": "Center",
                          "style": "accent"
                        }
                      ]
                    }
                  ]
                }
              ],
              "$data": "${getTicketsList}"
            }
          ],
          "id": "firstOne",
          "verticalContentAlignment": "Bottom"
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "TextBlock",
          "text": "Main Menu",
          "wrap": true,
          "weight": "Bolder",
          "color": "Default",
          "horizontalAlignment": "Center"
        }
      ],
      "selectAction": {
        "type": "Action.Submit",
        "data": {
          "action": "mainmenu"
        }
      },
      "spacing": "default",
      "style": "warning"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4"
}

[#4]

@nagajeyanthi - Using the card json provided we observed that it is behaving differently in Teams Desktop/Web client and Mobile devices.

Teams Desktop/Web:

Mobile:

Could you please confirm if this is the same behaviour you are encountering?

[#5]

@Prasad_Das-MSFT ,

Yes, you are right, we are encountering the same issue. In Desktop, the behavior of the adaptive card is correct, but in mobile version the same behavior need to be encountered, but it doesn't.

[#6]

@nagajeyanthi - We have raised a bug for the same and assigned the bug to engineering team to investigate. We will inform you once we get any further update from engineering team.
Thanks!

[#7]

@Prasad_Das-MSFT, Thanks for the update. Let me know once you got the update from engineering team.

[#8]

Any update on this?

[#9]

@nagajeyanthi - Apologies. Currently there is no update to share. We are following up with engineering team about this issue. We will update this thread once we hear from them. Thanks!

[#10]

Hi there, same issue here. Also, Microsoft Teams validation team reject the submission noticing this behaviour. We're blocked. Any update?

[#11]

@mrPsycox10 - Apologies. Currently there is no ETA to share. We are following up with engineering team about this issue. We will update this thread once we hear from them. Thanks!

[#12]

@nagajeyanthi , @mrPsycox10 - We got update from engineering team that nested Column and ColumnSet is the issue. Please try below JSON, it works fine. We have tested it.

{
    "type":"AdaptiveCard",
    "body":[
       {
          "type":"TextBlock",
          "text":"Here's your most recent requests",
          "wrap":true,
          "weight":"Bolder",
          "horizontalAlignment":"Center",
          "size":"Large",
          "color":"Default"
       },
       {
          "type":"Image",
          "url":"https://www.colorhexa.com/f9a31c.png",
          "width":"1000px",
          "height":"10px",
          "horizontalAlignment":"Right"
       },
       {
          "type":"ColumnSet",
          "columns":[
             {
                "type":"Column",
                "width":"auto",
                "items":[
                   {
                      "type":"Container",
                      "items":[
                         {
                            "type":"Container",
                            "items":[
                               {
                                  "type":"TextBlock",
                                  "text":"${title}",
                                  "weight":"Bolder",
                                  "color":"Dark",
                                  "horizontalAlignment":"Center"
                               }
                            ],
                            "selectAction":{
                               "type":"Action.Submit",
                               "data":{
                                  "action":"ticket",
                                  "id":"${value}"
                               }
                            },
                            "minHeight":"50px",
                            "verticalContentAlignment":"Center",
                            "style":"accent"
                         }
                      ],
                      "$data":"${getTicketsList}"
                   }
                ],
                "id":"firstOne",
                "verticalContentAlignment":"Bottom"
             }
          ]
       },
       {
          "type":"Container",
          "items":[
             {
                "type":"TextBlock",
                "text":"Main Menu",
                "wrap":true,
                "weight":"Bolder",
                "color":"Default",
                "horizontalAlignment":"Center"
             }
          ],
          "selectAction":{
             "type":"Action.Submit",
             "data":{
                "action":"mainmenu"
             }
          },
          "spacing":"default",
          "style":"warning"
       }
    ],
    "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
    "version":"1.4"
}

Thanks, 

Prasad Das

------------------------------------------------------------------------------------------ 

If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.