Forum Discussion
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
- Prasad_Das-MSFT
Microsoft
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.
- najin91Copper ContributorNew Teams: Version 23335.208.2601.834 (23335.208.2601.834)
Also, Teams on mac specifically.- Prasad_Das-MSFT
Microsoft
najin91 - To add a border to an image in an Adaptive Card in Microsoft Teams, you can use a
Containerelement with astyleproperty set toemphasis.Then, place theImageelement inside theContainer.{ "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.