[Designer] Broken design on Tables - no responsiveness #9338
Description
Problem Description
The expectations of the provided Card JSON is to render a table of three columns, third column always shown, second column shown only on devices of width at least standard, first column shown on devices of width at least narrow.
So in preview mode, for Very Narrow, we should see only third column, for Narrow we should see first and third columns, on Standard and Wide we should see all columns
Card JSON
{
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.6",
"msTeams": {
"width": "full"
},
"body": [
{
"type": "TextBlock",
"text": "Sample design to showcase broken table responsiveness",
"wrap": true,
"weight": "Bolder"
},
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "H1",
"wrap": true,
"targetWidth": "AtLeast:Narrow"
}
],
"targetWidth": "AtLeast:Narrow"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "H2",
"wrap": true,
"targetWidth": "AtLeast:Standard"
}
],
"targetWidth": "AtLeast:Standard"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "H3",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "R1C1",
"wrap": true,
"targetWidth": "AtLeast:Narrow"
}
],
"targetWidth": "AtLeast:Narrow"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "R1C2",
"wrap": true,
"targetWidth": "AtLeast:Standard"
}
],
"targetWidth": "AtLeast:Standard"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "R1C3",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "R2C1",
"wrap": true,
"targetWidth": "AtLeast:Narrow"
}
],
"targetWidth": "AtLeast:Narrow"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "R2C2",
"wrap": true,
"targetWidth": "AtLeast:Standard"
}
],
"targetWidth": "AtLeast:Standard"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "R2C3",
"wrap": true
}
]
}
]
}
]
}
],
"speak": "${root.speak}",
"msteams": {
"width": "full"
}
}Screenshot
