0

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!!

sarav
  • 47
  • 9
  • I see '"width": "700px"' for -all- of the items - that doesn't look right based on the screenshot. Looks like all -together- would be 700px – Hilton Giesenow Dec 07 '21 at 07:38
  • We are able to repro this, we are checking this internally. – Meghana-MSFT Dec 10 '21 at 05:40
  • 1
    We have raised a bug for the same. – Meghana-MSFT Dec 13 '21 at 15:32
  • @Meghana-MSFT - Thank you . Hopefully a fix is provided . Right now we have managed to place the images in vertical order to make it look good. – sarav Dec 23 '21 at 10:33
  • This issue has been fixed, We have checked and its working fine. Attaching a piece of code for emoji height and width. {"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"} – Meghana-MSFT Jan 10 '22 at 07:12

1 Answers1

1

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",
}
Meghana-MSFT
  • 595
  • 3
  • 7