microsoft / microsoft/AdaptiveCards
[Rendering] showBorder and roundedCorners does nothing
Open
Nobody has claimed this yet.
Area-Renderers
Bug
- Dominant language
- C#
- Stars
- 2k
- Forks
- 595
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 1
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
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the web JavaScript SDK using the supplied card JSON and the showBorder and roundedCorners properties. Trace Container rendering to determine why these settings do not affect the UI; done means both properties visibly update the rendered container as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, node.js
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100