0
votes

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

enter image description here

And in Microsoft Teams for Android the same Adaptive Cards look this way: enter image description here

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:

enter image description here

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

enter image description here

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?

2
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 wideHilton Giesenow
Yea Hilton is right, you need to make sure you use "Wrap":trueTim Cadenbach
Did you try this?Hilton Giesenow
@Hilton Giesenow: Where in my code would you add the wrap command?domac

2 Answers

0
votes

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.

0
votes

Updated Answer:

This is a known issue in the MS Teams Mobile App already raised with the team here: https://github.com/microsoft/AdaptiveCards/issues/3919

Someone is working on it and it should be solved in the next month.