How would it be possible that adaptive cards in Microsoft Teams for Android never be cropped (using c#)?

Question

In Microsoft Teams for Windows the Adaptive Cards look like this:

And in Microsoft Teams for Android the same Adaptive Cards look this way:

I'm using LG-files (Microsoft Language Generation files) and Microsoft.Bot.Builder.Dialogs.

Is there a solution to prevent that adaptive cards were being cropped in Microsoft Teams for Android?

Here is the code of the first part:

{
"type": "AdaptiveCard",
"body": [
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "auto",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Ja, einverstanden.",
                                "data": {
                                    "msteams": {
                                        "type": "messageBack",
                                        "text": "Ja, einverstanden.",
                                        "displayText": "Ja, einverstanden."
                                    }
                                }                                   
                            }
                        ]
                    }
                ]
            },
            {
                "type": "Column",
                "width": "auto",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Nein",
                                "data": {
                                    "msteams": {
                                        "type": "messageBack",
                                        "text": "Nein",
                                        "displayText": "Nein"
                                    }
                                }                                   
                            }
                        ]
                    }
                ]
            },
            {
                "type": "Column",
                "width": "auto",
                "items": [
                    {
                        "type": "ActionSet",
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "Weitere Infos",
                                "data": {
                                    "msteams": {
                                        "type": "messageBack",
                                        "text": "Weitere Infos",
                                        "displayText": "Weitere Infos"
                                    }
                                }                                   
                            }
                        ]
                    }
                ]
            }
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}

Thank you Tim Cadenbach. Your example looks like this on Android:

This means that only the first button was displayed and it was cropped. On Windows, it Looks like this:

The first and second buttons have been cropped.

All buttons are located one above the other and not side by side.

I considered adding a case distinction and programming other adaptive cards for mobile devices. How can I find out what device it is? With channels from Microsoft.Bot.Connector I can find out that the channel is MS Teams. But how the device?

Are you able to post the json for your card? It's possible that it has "wrap" set to "false", in which case it will NOT wrap the text, and will make it wide — Hilton Giesenow
Yea Hilton is right, you need to make sure you use "Wrap":true — Tim Cadenbach
@Hilton Giesenow: Where in my code would you add the wrap command? — domac

Gousia Begum Gousia Begum · Accepted Answer · 2020-06-22T04:53:40

This is the default behaviour of Mobile adaptive card actions. Adaptive card renders the buttons according to the width of the screens and provides you a scroll bar below to scroll through the buttons.

How would it be possible that adaptive cards in Microsoft Teams for Android never be cropped (using c#)?

2 Answers