Search code examples
botframeworkmicrosoft-teamsadaptive-cardsteams-toolkit

Is there a way to figure out the right dimensions for images to be used on Adaptive cards for a MS teams app?

We are trying to create an bot with a use of Adaptive cards on MS-Teams. The preview using adaptive card designer gives the proper image as required. But when used in the Teams app, the image looks totally distorted.

The preview image as in designer: enter image description here

The image output as in the MS teams app: enter image description here

Below is the Json used for the adaptive cards:

{
"type": "AdaptiveCard",
"body": [
    {
        "type": "TextBlock",
        "text": "Howdy!",
        "weight": "Bolder",
        "color": "Accent",
        "size": "Large"
    },
    {
        "type": "TextBlock",
        "text": "How are you doing today? ",
        "wrap": true
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "awful",
                                "comment": ""
                            },
                            "title": "awful"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/3-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "bad",
                                "comment": ""
                            },
                            "title": "bad"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px",
                        "spacing": "None"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/1-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "ok",
                                "comment": ""
                            },
                            "title": "ok"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/5-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "good",
                                "comment": ""
                            },
                            "title": "good"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            },
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/4-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "terrific",
                                "comment": ""
                            },
                            "title": "terrific"
                        },
                        "size": "Large",
                        "width": "700px",
                        "height": "60px"
                    }
                ]
            }
        ]
    },
    {
        "type": "Input.Text",
        "placeholder": "Add a comment",
        "isMultiline": true,
        "id": "comment"
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"actions": [
    {
        "type": "Action.Submit",
        "title": "OK",
        "data": {
            "rating": "",
            "comment": ""
        }
    }
]}

Thanks in advance!!

Solution

  • Moving comment to answer :

    This issue has been fixed, We have checked and its working fine. Attaching a piece of code for emoji height and width. Please keep the width inline with height.

    {
"type": "AdaptiveCard",
"body": [
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "width": "stretch",
                "items": [
                    {
                        "type": "Image",
                        "url": "https://howdy1.blob.core.windows.net/sample/2-removebg-preview.png",
                        "selectAction": {
                            "type": "Action.Submit",
                            "data": {
                                "rating": "awful",
                                "comment": ""
                            },
                            "title": "awful"
                        },
                        "size": "Large",
                        "width": "70px",
                        "height": "60px"
                    }
                ]
            }
        
        ]
    }
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
}