[Rendering] showBorder and roundedCorners does nothing #9255
Description
Target Platforms
NodeJS
SDK Version
3.0.5/3.0.4
Application Name
Web javascript sdk
Problem Description
Bug:
Seeting showBorder and roundedCorners does not change the UI.
Expected behavior:
The when showBorder and roundedCorners are set to true it should update the UI accordingly.
Hello,
Since the new web designer has been released I try to reproduce it's style in my app.
Amongs the problems I encounter I cannot make showBorder:true and roundedCorners: true works.
From my obversations it should add border-radius and border-color as inline style.
Looking at the it seems these properties only works in teams.
How can I re-implement this please ? I would like to inject inline style. For the borders it should be conditional to showBorder and then the style should be picked from hostConfig
Screenshots
Card JSON
{
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"speak": "Robin, explore your weekly picks",
"body": [
{
"type": "TextBlock",
"size": "Large",
"text": "Robin, explore your weekly picks",
"weight": "Bolder",
"wrap": true
},
{
"type": "TextBlock",
"text": "These resources will teach you how to achieve balance in your life and work with more ease.",
"wrap": true,
"targetWidth": "AtLeast:Narrow",
"spacing": "Small"
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/assets/ResourceImage_1.png",
"width": "56px",
"height": "56px",
"type": "Image",
"altText": "Zenith Health Video",
"style": "RoundedCorners"
}
],
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"isSubtle": true,
"size": "Small",
"text": "Video · 12min",
"wrap": true,
"type": "TextBlock"
},
{
"text": "Why You Should Take a Break from Screen Time and Enjoy Nature",
"weight": "Bolder",
"wrap": true,
"spacing": "None",
"type": "TextBlock"
},
{
"text": "Zenith Health",
"wrap": true,
"spacing": "None",
"type": "TextBlock"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
}
],
"style": "good",
"spacing": "Medium",
"targetWidth": "AtLeast:Narrow",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://adaptivecards.io/"
},
"type": "Container",
"showBorder": true,
"roundedCorners": true
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/assets/ResourceImage_2.png",
"width": "56px",
"height": "56px",
"type": "Image",
"altText": "Emma Jones Article",
"style": "RoundedCorners"
}
],
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"isSubtle": true,
"size": "Small",
"text": "Article · 5min",
"wrap": true,
"type": "TextBlock"
},
{
"text": "Stay Healthy and Productive Working from Home",
"weight": "Bolder",
"wrap": true,
"spacing": "None",
"type": "TextBlock"
},
{
"text": "Emma Jones",
"wrap": true,
"spacing": "None",
"type": "TextBlock"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
}
],
"style": "attention",
"spacing": "ExtraLarge",
"targetWidth": "AtLeast:Narrow",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://adaptivecards.io/"
},
"type": "Container",
"roundedCorners": true,
"showBorder": true
},
{
"items": [
{
"columns": [
{
"width": "auto",
"items": [
{
"url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/assets/ResourceImage_3.png",
"width": "56px",
"height": "56px",
"type": "Image",
"altText": "Insightia Course",
"style": "RoundedCorners"
}
],
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"isSubtle": true,
"size": "Small",
"text": "Course · 30min",
"wrap": true,
"type": "TextBlock"
},
{
"text": "Productivity Mastery: How to Optimize Your Energy, Focus and Motivation",
"weight": "Bolder",
"wrap": true,
"spacing": "None",
"type": "TextBlock"
},
{
"text": "Insightia",
"wrap": true,
"spacing": "None",
"type": "TextBlock"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
}
],
"style": "warning",
"spacing": "Small",
"targetWidth": "AtLeast:Narrow",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://adaptivecards.io/"
},
"type": "Container",
"roundedCorners": true,
"showBorder": true
},
{
"type": "Container",
"targetWidth": "VeryNarrow",
"items": [
{
"text": "Learn how to achieve balance in life and work.",
"wrap": true,
"type": "TextBlock"
},
{
"type": "Container",
"id": "content1",
"items": [
{
"type": "Container",
"backgroundImage": {
"url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/assets/ResourceImage_1_Horizontal.png",
"verticalAlignment": "Center",
"horizontalAlignment": "Center"
},
"bleed": true,
"minHeight": "128px",
"items": [
{
"type": "TextBlock"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://adaptivecards.io/"
}
},
{
"type": "ColumnSet",
"horizontalAlignment": "Center",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Icon",
"name": "ChevronLeft",
"color": "Accent",
"size": "xSmall",
"horizontalAlignment": "Right",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content3"
]
}
}
],
"verticalContentAlignment": "Center",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"style": "Filled",
"size": "Small",
"horizontalAlignment": "Center"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"size": "Small",
"horizontalAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content2"
]
}
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"size": "Small",
"horizontalAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content3"
]
}
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Icon",
"name": "ChevronRight",
"color": "Accent",
"size": "xSmall",
"horizontalAlignment": "Left",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content2"
]
}
}
],
"verticalContentAlignment": "Center"
}
]
},
{
"text": "Why You Should Take a Break from Screen Time and Enjoy Nature",
"weight": "Bolder",
"wrap": true,
"type": "TextBlock",
"horizontalAlignment": "Center"
},
{
"isSubtle": true,
"size": "Small",
"text": "Video · 12min",
"wrap": true,
"type": "TextBlock",
"spacing": "None",
"horizontalAlignment": "Center"
}
]
},
{
"type": "Container",
"id": "content2",
"items": [
{
"type": "Container",
"backgroundImage": {
"url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/assets/ResourceImage_2_Horizontal.png",
"verticalAlignment": "Center",
"horizontalAlignment": "Center"
},
"bleed": true,
"minHeight": "128px",
"items": [
{
"type": "TextBlock"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://adaptivecards.io/"
}
},
{
"type": "ColumnSet",
"horizontalAlignment": "Center",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Icon",
"name": "ChevronLeft",
"color": "Accent",
"size": "xSmall",
"horizontalAlignment": "Right",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content2"
]
}
}
],
"verticalContentAlignment": "Center",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"size": "Small",
"horizontalAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content2"
]
}
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"style": "Filled",
"size": "Small",
"horizontalAlignment": "Center"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"size": "Small",
"horizontalAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content2",
"content3"
]
}
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Icon",
"name": "ChevronRight",
"color": "Accent",
"size": "xSmall",
"horizontalAlignment": "Left",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content2",
"content3"
]
}
}
],
"verticalContentAlignment": "Center"
}
]
},
{
"text": "Stay Healthy and Productive Working from Home",
"weight": "Bolder",
"wrap": true,
"type": "TextBlock",
"horizontalAlignment": "Center"
},
{
"isSubtle": true,
"size": "Small",
"text": "Article · 5min",
"wrap": true,
"type": "TextBlock",
"spacing": "None",
"horizontalAlignment": "Center"
}
],
"isVisible": false
},
{
"type": "Container",
"id": "content3",
"items": [
{
"type": "Container",
"backgroundImage": {
"url": "https://raw.githubusercontent.com/OfficeDev/Microsoft-Teams-Card-Samples/main/samples/list/assets/ResourceImage_3_Horizontal.png",
"verticalAlignment": "Center",
"horizontalAlignment": "Center"
},
"bleed": true,
"minHeight": "128px",
"items": [
{
"type": "TextBlock"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://adaptivecards.io/"
}
},
{
"type": "ColumnSet",
"horizontalAlignment": "Center",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Icon",
"name": "ChevronLeft",
"color": "Accent",
"size": "xSmall",
"horizontalAlignment": "Right",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content2",
"content3"
]
}
}
],
"verticalContentAlignment": "Center",
"horizontalAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"size": "Small",
"horizontalAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content3"
]
}
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"size": "Small",
"horizontalAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content2",
"content3"
]
}
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Icon",
"name": "CircleSmall",
"color": "Accent",
"style": "Filled",
"size": "Small",
"horizontalAlignment": "Center"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Icon",
"name": "ChevronRight",
"color": "Accent",
"size": "xSmall",
"horizontalAlignment": "Left",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"content1",
"content3"
]
}
}
],
"verticalContentAlignment": "Center"
}
]
},
{
"text": "Productivity Mastery: How to Optimize Your Energy, Focus, and Motivation",
"weight": "Bolder",
"wrap": true,
"type": "TextBlock",
"horizontalAlignment": "Center"
},
{
"isSubtle": true,
"size": "Small",
"text": "Course · 30min",
"wrap": true,
"type": "TextBlock",
"spacing": "None",
"horizontalAlignment": "Center"
}
],
"isVisible": false
}
]
},
{
"actions": [
{
"url": "https://adaptivecards.io/",
"title": "Open Zenergy",
"type": "Action.OpenUrl"
},
{
"title": "Remind me later",
"iconUrl": "icon:Clock",
"type": "Action.Submit"
}
],
"spacing": "Medium",
"type": "ActionSet"
}
]
}Sample Code Language
js
Sample Code
const adaptiveCardHostConfig = {
"choiceSetInputValueSeparator": ",",
"supportsInteractivity": true,
"spacing": {
"small": 8,
"default": 12,
"medium": 16,
"large": 20,
"extraLarge": 24,
"padding": 16
},
"separator": {
"lineThickness": 1,
"lineColor": "#EEEEEE"
},
"fontTypes": {
"default": {
"fontFamily": "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 14,
"large": 18,
"extraLarge": 24
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
},
"monospace": {
"fontFamily": "'Courier New', Courier, monospace",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 14,
"large": 18,
"extraLarge": 24
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
}
},
"textStyles": {
"heading": {
"fontType": "default",
"size": "large",
"weight": "bolder",
"color": "default",
"isSubtle": false
}
},
"textBlock": {
"headingLevel": 2
},
"imageSizes": {
"small": 32,
"medium": 52,
"large": 100
},
"containerStyles": {
"default": {
"foregroundColors": {
"default": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"dark": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"light": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"accent": {
"default": "#ffa6a7dc",
"subtle": "#ff8b8cc7"
},
"good": {
"default": "#ff92c353",
"subtle": "#e592c353"
},
"warning": {
"default": "#fff8d22a",
"subtle": "#e5f8d22a"
},
"attention": {
"default": "#ffd74654",
"subtle": "#e5d74654"
}
},
"borderColor": "#CCCCCC",
"backgroundColor": "#ff2d2c2c"
},
"emphasis": {
"foregroundColors": {
"default": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"dark": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"light": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"accent": {
"default": "#ffa6a7dc",
"subtle": "#ff8b8cc7"
},
"good": {
"default": "#ff92c353",
"subtle": "#e592c353"
},
"warning": {
"default": "#fff8d22a",
"subtle": "#e5f8d22a"
},
"attention": {
"default": "#ffd74654",
"subtle": "#e5d74654"
}
},
"borderColor": "#666666",
"backgroundColor": "#ff292828"
},
"accent": {
"borderColor": "#62A8F7",
"backgroundColor": "#C7DEF9",
"foregroundColors": {
"default": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"dark": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"light": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"accent": {
"default": "#ffa6a7dc",
"subtle": "#ff8b8cc7"
},
"good": {
"default": "#ff92c353",
"subtle": "#e592c353"
},
"warning": {
"default": "#fff8d22a",
"subtle": "#e5f8d22a"
},
"attention": {
"default": "#ffd74654",
"subtle": "#e5d74654"
}
}
},
"good": {
"borderColor": "#69E569",
"backgroundColor": "#CCFFCC",
"roundedCorners": true,
"borderRadius": 'solid 6px',
"foregroundColors": {
"default": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"dark": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"light": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"accent": {
"default": "#ffa6a7dc",
"subtle": "#ff8b8cc7"
},
"good": {
"default": "#ff92c353",
"subtle": "#e592c353"
},
"warning": {
"default": "#fff8d22a",
"subtle": "#e5f8d22a"
},
"attention": {
"default": "#ffd74654",
"subtle": "#e5d74654"
}
}
},
"attention": {
"borderColor": "#FF764C",
"backgroundColor": "#FFC5B2",
"foregroundColors": {
"default": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"dark": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"light": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"accent": {
"default": "#ffa6a7dc",
"subtle": "#ff8b8cc7"
},
"good": {
"default": "#ff92c353",
"subtle": "#e592c353"
},
"warning": {
"default": "#fff8d22a",
"subtle": "#e5f8d22a"
},
"attention": {
"default": "#ffd74654",
"subtle": "#e5d74654"
}
}
},
"warning": {
"borderColor": "#FFBC51",
"backgroundColor": "#FFE2B2",
"foregroundColors": {
"default": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"dark": {
"default": "#ff201f1f",
"subtle": "#ff2d2c2c"
},
"light": {
"default": "#ffffffff",
"subtle": "#bfffffff"
},
"accent": {
"default": "#ffa6a7dc",
"subtle": "#ff8b8cc7"
},
"good": {
"default": "#ff92c353",
"subtle": "#e592c353"
},
"warning": {
"default": "#fff8d22a",
"subtle": "#e5f8d22a"
},
"attention": {
"default": "#ffd74654",
"subtle": "#e5d74654"
}
}
}
},
"actions": {
"maxActions": 6,
"spacing": "Default",
"buttonSpacing": 8,
"showCard": {
"actionMode": "Inline",
"inlineTopMargin": 16,
"style": "emphasis"
},
"preExpandSingleShowCardAction": false,
"actionsOrientation": "Horizontal",
"actionAlignment": "Left"
},
"adaptiveCard": {
"allowCustomStyle": false
},
"imageSet": {
"imageSize": "Medium",
"maxImageHeight": 100
},
"factSet": {
"title": {
"size": "Default",
"color": "Default",
"isSubtle": false,
"weight": "Bolder",
"warp": true
},
"value": {
"size": "Default",
"color": "Default",
"isSubtle": false,
"weight": "Default",
"warp": true
},
"spacing": 16
}
}