Adaptive Card not rendering on Teams Mobile app

임수연 30 Reputation points
2025-08-22T07:58:14.7+00:00

Hello Microsoft Support Team,

I am experiencing an issue where an Adaptive Card renders correctly on the Teams desktop client, but the same card does not appear on the Teams mobile app.

Specifically:

  • The card is built with version 1.5 and contains a Chart.Gauge element.
  • On desktop, everything works as expected.
  • On mobile, the card fails to render at all.

Could you please clarify:

  • Whether Teams mobile currently supports Adaptive Cards version 1.5.
  • Whether the Chart.Gauge element is supported on Teams mobile, or if it requires fallback handling.

If this is a known limitation or regression due to a recent Teams mobile update.

Any documentation or guidance on ensuring consistent rendering across both desktop and mobile clients would be greatly appreciated.

Below is the JSON code I wrote.

{
   "$schema":"https://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.5",
   "fallbackText":"This card requires Adaptive Cards v1.5 support to be rendered properly.",
   "body":[
      {
         "type":"Container",
         "style":"emphasis",
         "bleed":true,
         "items":[
            {
               "type":"TextBlock",
               "size":"Large",
               "weight":"Bolder",
               "text":"연차 현황",
               "wrap":true,
               "horizontalAlignment":"Center"
            }
         ]
      },
      {
         "type":"ColumnSet",
         "spacing":"Large",
         "separator":true,
         "columns":[
            {
               "type":"Column",
               "width":"stretch",
               "items":[
                  {
                     "type":"Chart.Gauge",
                     "title":"연차 사용률",
                     "colorSet":"sequential",
                     "value":'1',
                     "showLegend":false,
                     "segments":[
                        {
                           "color":"categoricalRed",
                           "legend":"필수 연차 사용률",
                           "size":7
                        },
                        {
                           "color":"neutral",
                           "legend":" ",
                           "size":3
                        }
                     ],
                     "showMinMax":false
                  },
                  {
                     "type":"Container",
                     "items":[
                        {
                           "type":"TextBlock",
                           "horizontalAlignment":"Right",
                           "text":"@@",
                           "wrap":true
                        },
                        {
                           "type":"TextBlock",
                           "horizontalAlignment":"Right",
                           "text":"@@",
                           "wrap":true
                        }
                     ]
                  }
               ]
            }
         ]
      },
      {
         "type":"Container",
         "items":[
            {
               "type":"TextBlock",
               "size":"Large",
               "weight":"Bolder",
               "text":"@@",
               "wrap":true
            }

Thank you:)

Microsoft Teams | Development
{count} votes

2 answers

Sort by: Most helpful
  1. Steven-N 6,595 Reputation points Microsoft External Staff Moderator
    2025-08-22T09:11:25.9933333+00:00

    Hi 임수연

    Thanks for reaching out to Microsoft Q&A forum support 

    Based on your description, I understand that you're encountering an issue where an Adaptive Card built with version 1.5 renders correctly on the Teams desktop client but fails to appear on the Teams mobile app. The card includes a Chart.Gauge element and does not display at all on mobile. So, I have conducted a survey from various sources and tested in my environment, and I believe the following information may be relevant to your issue. 

    Regarding to your first question, while Microsoft documentation encourages testing full-width Adaptive Cards on narrow form factors like mobile (suggesting that version 1.5 is supported) it does not confirm full compatibility. This guidance mainly advises developers to ensure layout compatibility for supported elements. User's image Moreover, unlike the desktop client, which handles v1.5 features well, the mobile version struggles with advanced visual components such as Chart.Gauge. As a result, cards using unsupported elements may fail to render entirely on mobile devices, despite the documentation’s recommendation to test across form factors. 

    In reality, many users have encountered this issue as well. I found a discussion on the GitHub community addressing this topic here: [Rendering] Teams adaptative cards 1.5 can't display · Issue #7676 · microsoft/AdaptiveCards 

    From my perspective, this can be considered a limitation of Adaptive Card v1.5 on the mobile platform. Additionally, I came across a blog post and other sources suggesting that for broader compatibility across platforms, it is recommended to downgrade your Adaptive Card to version 1.4. You should also consider replacing the Chart.Gauge element with simpler components or implementing fallback logic using fallbackText or fallback blocks. This ensures that users on mobile clients still receive a functional and informative experience, even if advanced visuals cannot be rendered. 

    Link reference: Adaptive Cards not Displaying in Microsoft Teams - Matt Jimison 

    Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link 

    Hope my answer will help you, for any further support, kindly let me know


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".     

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


  2. Sayali-MSFT 4,026 Reputation points Microsoft External Staff Moderator
    2025-08-22T09:47:14.3366667+00:00

    Hello 임수연,
    We have tested the above scenario on an iOS device, and it is working fine from our end. Could you please confirm whether you tested it on an iOS or Android device?
    IOS Version-18.6.1
    Teams version-7.14.77.2025142802/0811

    Image (10)

    Image (11)


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.