Forum Discussion

najin91's avatar
najin91
Copper Contributor
Feb 05, 2024

Can't add border onto Adaptive Cards images or render images in tables in Teams

Hi there - I'm trying to add a border to an image, but I'm running into problems. One, it seems like the style feature for an image doesn't allow actual css, instead it allows me to specify person or default which is kind of weird. Then, when I try to render the image in a table since table allows me to show the border, it gives me an image cannot be found icon, despite it rendering perfectly fine before.

Ex 1:

"contentType": "application/vnd.microsoft.card.adaptive",
                    "content": {
                        "type": "AdaptiveCard",
                        "version": "1.5",
                        "body": [
                            {
                                "type": "Image",
                                "style": "border: solid;",
                                "url": "https://dogfood-staging.global.ssl.fastly.net/s/image/yB5yjZ/gzz-usf-xgq.png"
                            }
                        ]
                    }

Style doesn't work 😞

 

Ex 2:

"content": {
                        "type": "AdaptiveCard",
                        "version": "1.5",
                        "body": [
                            {
                                "type": "Table",
                                "columns": [
                                    {
                                        "width": 100
                                    }
                                ],
                                "rows": [
                                    {
                                        "type": "TableRow",
                                        "cells": [
                                            {
                                                "type": "TableCell",
                                                "items": [
                                                    {
                                                        "type": "Image",
                                                        "url": "https://dogfood-staging.global.ssl.fastly.net/s/image/yB5yjZ/gzz-usf-xgq.png"
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

Shows up as the following (see attached image):

 

Also, MS Teams currently only supports adaptive cards v1.5 or below? When will it support higher versions?

 

 

 

 

3 Replies

  • najin91 - Thanks for raising your issue. Could you please let us know if you are facing this issue in Teams classic or New Teams?

    Also, regarding your question about the version support of Adaptive Cards in Microsoft Teams, as of now, Microsoft Teams supports Adaptive Cards version 1.5 or below. There is no official information available about when higher versions will be supported.

    • najin91's avatar
      najin91
      Copper Contributor
      New Teams: Version 23335.208.2601.834 (23335.208.2601.834)

      Also, Teams on mac specifically.
      • Prasad_Das-MSFT's avatar
        Prasad_Das-MSFT
        Icon for Microsoft rankMicrosoft

        najin91 - To add a border to an image in an Adaptive Card in Microsoft Teams, you can use a Container element with a style property set to emphasis .Then, place the Image element inside the Container.

        {
            "type": "AdaptiveCard",
            "body": [
                {
                    "type": "Container",
                    "style": "emphasis",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/cats/1.png"
                        }
                    ]
                }
            ],
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "version": "1.2"
        }

         

         

         

        Thanks, 

        Prasad Das

        ------------------------------------------------------------------------------------------ 

        If the response is helpful, please click "**Mark as Best Response**" and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate. 

Resources