Adaptive Card with codeblock not Displaying On Teams Mobile

Question

Issue: CodeBlock Not Displaying in Microsoft Teams Mobile

Description

When using "type": "CodeBlock" in an Adaptive Card to display formatted code (e.g., JSON), the message does not appear on Microsoft Teams Mobile. However, it renders correctly on Microsoft Teams Desktop and Web.

Observed Behavior

• The Adaptive Card containing "type": "CodeBlock" does not appear at all on mobile devices.
• No error message is shown, and the card is completely missing from the chat.
• The same card displays correctly on desktop and web versions of Microsoft Teams.

Expected Behavior

• The "CodeBlock" element should be consistently rendered across all platforms, including mobile.
• If "CodeBlock" is not supported on mobile, there should be a fallback or an error message instead of the card disappearing completely.

Steps to Reproduce

1. Send an Adaptive Card with the following structure via a bot/webhook: Issue: CodeBlock Not Displaying in Microsoft Teams Mobile Description When using "type": "CodeBlock" in an Adaptive Card to display formatted code (e.g., JSON), the message does not appear on Microsoft Teams Mobile. However, it renders correctly on Microsoft Teams Desktop and Web. Observed Behavior
   1. The Adaptive Card containing "type": "CodeBlock" does not appear at all on mobile devices.
   2. No error message is shown, and the card is completely missing from the chat.
   3. The same card displays correctly on desktop and web versions of Microsoft Teams.

Expected Behavior

• The "CodeBlock" element should be consistently rendered across all platforms, including mobile.
• If "CodeBlock" is not supported on mobile, there should be a fallback or an error message instead of the card disappearing completely.

Steps to Reproduce

1. Send an Adaptive Card with the following structure via a bot/webhook:
       msg = {

            "type": "message",

            "attachments": [

                {

                    "contentType": "application/vnd.microsoft.card.adaptive",

                    "content": {

                        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

                        "type": "AdaptiveCard",

                        "version": "1.2",

                        "body": [

                            {

                                "type": "Container",

                                "items": [

                                    {

                                        "type": "TextBlock",

                                        "text": f"deletion-service-{stage}",

                                        "size": "Large",

                                        "weight": "Bolder",

                                        "horizontalAlignment": "Left"

                                    },

                                    {

                                        "type": "CodeBlock",

                                        "codeSnippet": message_str,  

                                        "language": "json",

                                        "wrap": True  

                                    }

                                ]

                            }

                        ],

                        "msteams": {

                            "width": "Full"

                        }

                    }

                }

            ]

        }

Answer 1

Hello @Sayali-MSFT thank you for the response,
i am using Android but not quite sure about the iOS device but i think it's the same issue

Answer 2

Hello @Samer Hisham,, The issue you're encountering with the "type": "CodeBlock" element in Adaptive Cards not rendering on Microsoft Teams Mobile is due to the fact that the "CodeBlock" element is not currently supported on mobile platforms.
This limitation results in the entire card not being displayed, which is why it appears correctly on desktop and web but not on mobile devices.

Thank you for your suggestion! To better achieve your requirements, we recommend submitting this feature request through the Teams Feedback Portal. This is the best way to ensure your idea is considered for future updates. 

We appreciate your input and encourage you to share any additional thoughts!