[Rendering] Teams adaptive cards automatically obscured in channels on the New Channels Experience/Teams 2.1 client

[z3019494]

Target Platforms

Other

SDK Version

1.4

Application Name

Microsoft Teams 2.0/Microsoft Teams Chat

Problem Description

Teams 2.1 or the Teams 1.0 New Channel Experience requires the user to click on the "see more" button as most of an adaptive card is obscured.

This was not the case in

• The Teams 1.0 client classic channels experience
• Teams chat (1.0 or 2.1)

Screenshots

Teams 2.1 or the Teams 1.0 new channels experience, requiring the user to click on "see more" to view an entire adaptive card:

Teams 1.0 classic channel experience, renders nicely without obscuring any information.

Card JSON

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.4",
    "msteams": {
        "width": "full"
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "Image",
                                    "altText": "Alert",
                                    "url": "https://normanhurb-h.schools.nsw.gov.au/content/dam/doe/sws/schools/n/normanhurb-h/icons/exam.png",
                                    "width": "75px",
                                    "selectAction": {
                                        "type": "Action.OpenUrl",
                                        "url": "https://teams.microsoft.com/l/stage/2a527703-1f6f-4559-a332-d8a7d288cd88/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fschoolsnsw.sharepoint.com%2F%3Ab%3A%2Fs%2FN1XHSGBP%2Fmathematics%2FEaa5SGAOfe9ImIY94m_NJQ4BYrXhidPy87eYHN7cQl8egQ%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fschoolsnsw.sharepoint.com%2F%3Ab%3A%2Fs%2FN1XHSGBP%2Fmathematics%2FEaa5SGAOfe9ImIY94m_NJQ4BYrXhidPy87eYHN7cQl8egQ%22%2C%22name%22%3A%22Notification%20for%20Year%2009%202023%20Assessment%20Task%203%22%7D",
                                        "id": "10"
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "**Assessment Task Notification**",
                                    "weight": "Bolder",
                                    "size": "Large",
                                    "wrap": true,
                                    "color": "Accent"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "2023 Year 09 Assessment Task 3",
                                    "wrap": true,
                                    "spacing": "None",
                                    "color": "Attention",
                                    "weight": "Bolder",
                                    "size": "Large"
                                }
                            ],
                            "verticalContentAlignment": "Center"
                        }
                    ]
                }
            ],
            "style": "warning",
            "bleed": true
        },
        {
            "type": "TextBlock",
            "text": "Dear <atTag><tagId>MDVhMGU2OWEtNDE4YS00N2MxLTljMjUtOTM4NzI2MWJmOTkxIyM1NzI3MjgxNi0yMjMxLTQ5ZjUtOTFiZS03NGY0NmY2Y2JhYzIjI3RRYWNHUXNwNEQ%3D</tagId><groupId>57272816-2231-49f5-91be-74f46f6cbac2</groupId></atTag>, please note that a new Assessment Task Notification is now available.",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "The following resources for revision will be provided no later than these dates:",
            "weight": "Bolder",
            "color": "Accent",
            "wrap": true,
            "separator": true
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "title": "Past Paper(s):",
                    "value": "Thursday, August 3, 2023"
                },
                {
                    "title": "Past Paper Solution(s):",
                    "value": "Monday, August 14, 2023"
                }
            ]
        },
        {
            "type": "Container",
            "bleed": true,
            "style": "emphasis",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Actions",
                    "wrap": true,
                    "weight": "Bolder",
                    "color": "Accent"
                },
                {
                    "type": "ActionSet",
                    "spacing": "None",
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "title": "Preview detailed notification for Year 09 2023 Assessment Task 3 (PDF)",
                            "url": "https://teams.microsoft.com/l/stage/2a527703-1f6f-4559-a332-d8a7d288cd88/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fschoolsnsw.sharepoint.com%2F%3Ab%3A%2Fs%2FN1XHSGBP%2Fmathematics%2FEaa5SGAOfe9ImIY94m_NJQ4BYrXhidPy87eYHN7cQl8egQ%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fschoolsnsw.sharepoint.com%2F%3Ab%3A%2Fs%2FN1XHSGBP%2Fmathematics%2FEaa5SGAOfe9ImIY94m_NJQ4BYrXhidPy87eYHN7cQl8egQ%22%2C%22name%22%3A%22Notification%20for%20Year%2009%202023%20Assessment%20Task%203%22%7D",
                            "id": "0",
                            "iconUrl": "https://normanhurb-h.schools.nsw.gov.au/content/dam/doe/sws/schools/n/normanhurb-h/icons/pdf.png"
                        },
                        {
                            "type": "Action.OpenUrl",
                            "title": "View Learning Programs",
                            "url": "https://schoolsnsw.sharepoint.com/:f:/s/293YP4GC/EpYRilAICVtDpEHcOejpFl0Ba6t73Hr7JzT0SI5j_rEBFA?e=SWDaQl",
                            "id": "1",
                            "iconUrl": "https://normanhurb-h.schools.nsw.gov.au/content/dam/doe/sws/schools/n/normanhurb-h/icons/sharepoint.png"
                        }
                    ]
                }
            ]
        }
    ]
}

Sample Code Language

No response

Sample Code

No response

[Schuchie]

I am also affected.

Looks like its related: https://github.com/MicrosoftDocs/msteams-docs/issues/8091

[WilbertWalrus]

This is still not fixed in version 1.6.00.29964 (64-bit)

@ChetanSharma-msft — not everyone is on Channels 2.0 yet

[Prasad-MSFT]

Hi @z3019494 - Could you please let us know in which version you tested this and observed that its fixed as mentioned here?

[z3019494]

@Prasad-MSFT :

For me, it's been fixed on Teams 2.1 web:

...as well as 23306.3314.2555.9628

[z3019494]

I have a suspicion it's been fixed just as Loop Components in channels is being rolled out... 😂

[havedill]

@Prasad-MSFT : ...as well as 23306.3314.2555.9628

I'm seeing this issue on my version, even now

[Prasad-MSFT]

@Schuchie , @WilbertWalrus , @havedill - We checked this using New Teams (Teams 2.1), and the card is rendering properly.

[havedill]

Maybe it's a webhook specific issue then? I'm still seeing this on all my clients on the new teams mac and windows. Going to the old teams fixes the issue. Jira and Zabbix both use webhooks to create these

[havedill]

I just realized there is a duplicate thread going on. More info here:

https://github.com/MicrosoftDocs/msteams-docs/issues/8091#issuecomment-1896237181

[havedill]

I can reproduce with this simple bash as well to my webhook connector.

JSON="{\"title\": \"${env^^} Incoming Server Updates\", \"themeColor\": \"Red\", \"text\": \"<br>
$MESSAGE
\" }"

curl -k -H "Content-Type: application/json" -d "${JSON}" "${TEAMS_URL}"

[Prasad-MSFT]

@havedill - We tried below using simple bash to our webhook connector and observed below behaviour in Teams classic and New Teams as well: curl.exe -H "Content-Type:application/json" -d "{ '@type': 'MessageCard', '@context': 'https://schema.org/extensions', 'summary':'\uD83D\uDCAC <b>Summary test</b> on', 'themeColor': '#00FF00', 'title': '\uD83D\uDCAC <b>Sebastian commented</b> on', 'sections':[{'text': 'The actionable messages include six visible buttons on the card. Each button is defined in the potentialAction property of the message by using ActionCard actions, each with an input type, a text field, a date picker, or a multiple-choice list. Each ActionCard has an associated action, for example HttpPOST.For the HttpPOST action, the bearer token is included with the requests. This token includes the Microsoft Entra identity of the Microsoft 365 user who took the action.You can also use this JSON to create cards containing rich inputs, such as text entry, multiselect, or selecting date and time. The code that generates the card and posts it to the webhook URL can run on any hosted service. These cards are defined as part of actionable messages and are also supported in cards used in Teams bots and message extensions.'}]}" $WEBHOOKURL

Could you please confirm if you are observing the same or not?

[Prasad-MSFT]

Update: We have reopened the bug which was already raised and made engineering team aware about the reoccurrence of the issue. Once we get further update, we will inform in this thread.

Thanks again!