Adaptivecards: [Teams][Rendering] Cards not rendered correctly on teams channel

[schemburkar]

Platform

Microsoft Teams

Description

I'm sending a adaptive card to multiple platforms including teams and web chat. The card will have multiple options based on user input (up to 5). These are not suggested actions but Submit Actions via cards
Except for teams, the adaptive card is rendered incorrectly.
I can reproduce the issue on the designer (https://adaptivecards.io/designer/) as well.

JSON

{
    "type": "AdaptiveCard",
    "body": [
        {
            "color": "Accent",
            "text": "Please choose a feature.",
            "type": "TextBlock"
        },
        {
            "text": "Please select from one of the below options",
            "wrap": true,
            "type": "TextBlock"
        },
        {
            "items": [
                {
                    "columns": [
                        {
                            "items": [
                                {
                                    "actions": [
                                        {
                                            "title": "GitHub Test 1",
                                            "type": "Action.Submit"
                                        }
                                    ],
                                    "type": "ActionSet"
                                }
                            ],
                            "type": "Column",
                            "width": "stretch"
                        },
                        {
                            "items": [
                                {
                                    "actions": [
                                        {
                                            "title": "GitHub Test Action 2",
                                            "type": "Action.Submit"
                                        }
                                    ],
                                    "type": "ActionSet"
                                }
                            ],
                            "type": "Column",
                            "width": "stretch"
                        },
                        {
                            "items": [
                                {
                                    "actions": [
                                        {
                                            "wrap": true,
                                            "title": "GitHub Test Action 3",
                                            "type": "Action.Submit"
                                        }
                                    ],
                                    "type": "ActionSet"
                                }
                            ],
                            "type": "Column",
                            "width": "stretch"
                        }
                    ],
                    "type": "ColumnSet"
                },
                {
                    "columns": [
                        {
                            "items": [
                                {
                                    "actions": [
                                        {
                                            "title": "GitHub Test 4",
                                            "type": "Action.Submit"
                                        }
                                    ],
                                    "type": "ActionSet"
                                }
                            ],
                            "type": "Column",
                            "width": "stretch"
                        },
                        {
                            "items": [
                                {
                                    "actions": [
                                        {
                                            "title": "GitHub Test 5",
                                            "type": "Action.Submit"
                                        }
                                    ],
                                    "type": "ActionSet"
                                }
                            ],
                            "type": "Column",
                            "width": "stretch"
                        }
                    ],
                    "type": "ColumnSet"
                }
            ],
            "type": "Container"
        }
    ],
    "version": "1.2",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Rendering

Web Chat Rendering (Designer) ✅

Teams Rendering (Designer)❌

Teams Rendering (Actual)❌

Expected Result

Rendering on teams should be same as other channels like web chat.

Please let me know if any more information is needed

[shalinijoshi19]

Thanks for reporting this@schemburkar. I dont see this repro'ing on https://adaptivecards.io/designer

Can you please confirm if you are still seeing this? If so, @ckkashyap , @siduppal can you please help triage as this doesn't seem to be an AdaptiveCards issue on the onset..

Thanks!

[schemburkar]

@Shalini-MSFT Thanks for investigating. I think you overlooked the fact that the rendering does not work on Teams channel, whereas your screenshot is for Web Chat.

I tested again on both live teams app as well as on the designer with the teams channel.

Live Microsoft Teams app ❌

adaptivecards.io/designer - Host App: Teams ❌

To answer your question

Can you please confirm if you are still seeing this

YES

[susanshen96]

@schemburkar, @shalinijoshi19 - Took a look, and it does seem to be an issue on the Teams client. There was a regression in how the button text is rendered, but the buttons in column seems to be a newer rendering issue that wasn't considered before. Will have a fix out, which should be available externally in around a month's time.

[shalinijoshi19]

@susanshen96 assigning to you for tracking.