Width of Adaptive Card is fixed for json

Platform

What platform is your issue or question related to? (Delete other platforms).

• Bot Framework Web Chat - json

Author

We’re sending cards to Bot Framework Web Chat Control

Version of SDK - JSON - 1.0

Issue

I need to display a table in the web chat control. Markdown table rendering is not really helpful and I switced to Adaptive Cards ColumnSet to display the table. The json is shown good in the visualizer. Though some part of the text is wrapped, still its pretty decent.

But when the same is rendered on the web chat, all the dates are lost and it does not the required info. I tried modifying the width of the “wc-card”, “wc-adaptive-card” properties on a custom build but with no results.

Visualizer Output

Web Chat Output

Source for the visualizer

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type":"TextBlock", "text": "This is a sample test that is being tested for the feasibility of testing the test and there on....." }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "FPC" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" }, { "type": "TextBlock", "separator": true, "text": "80322923" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "LIFECYCLE" }, { "type": "TextBlock", "separator": true, "text": "ARGENTINA" }, { "type": "TextBlock", "separator": true, "text": "CHILE" }, { "type": "TextBlock", "separator": true, "text": "COLOMBIA" }, { "type": "TextBlock", "separator": true, "text": "COSTA RICA" }, { "type": "TextBlock", "separator": true, "text": "ECUADOR" }, { "type": "TextBlock", "separator": true, "text": "GUATEMALA" }, { "type": "TextBlock", "separator": true, "text": "LADMAR CENTRAL AND C" }, { "type": "TextBlock", "separator": true, "text": "LADMAR SOUTH AMERICA" }, { "type": "TextBlock", "separator": true, "text": "MEXICO" }, { "type": "TextBlock", "separator": true, "text": "PERU" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "NOT FOR SALES FLAG" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" }, { "type": "TextBlock", "separator": true, "text": "N" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "CUSTOMER LIST PRICE DATE" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" }, { "type": "TextBlock", "separator": true, "text": "7/25/2018" } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "SOS" }, { "type": "TextBlock", "separator": true, "text": "12/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" }, { "type": "TextBlock", "separator": true, "text": "10/1/2018" }, { "type": "TextBlock", "separator": true, "text": "11/1/2018" } ] } ] } ] } Also tried the width and size properties as specified here without any luck. I’m not 100% sure if this belongs here or in the Web Chat repo. Am happy to move it there if its the case.

There is a Similar issue on stackoverflow which does not help.

[vijaysaimutyala]

An update.

HTML on Web Chat is turned off by default. If anyone were to render their HTML on Web Chat, they can turn it on by forking the repo and carrying out their build. Instruction for this are mentioned here.

Though the issue with table is resolved, I would still like to know if there is any way we can increase the width of an adaptive card.

[shalinijoshi19]

Dup of #4773 which is now being tracked for this work.