Search code examples
pythonbotframeworkmicrosoft-teamsadaptive-cards

Adaptive Card: How to create table with 6 columns without truncating text?


I have created a adaptive card to show as table. But, the text is getting truncated like Today I... instead of Today In Count complete text.

This Adaptive card is for Microsoft Teams.

Adaptive Card:

{
   "$schema":"http://adaptivecards.io/schemas/adaptive-card.json",
   "type":"AdaptiveCard",
   "version":"1.2",
   "body":[
      {
         "type":"ColumnSet",
         "columns":[
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Zone",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"EAST ZONE",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Today In Counter",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"168",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Monthly Count (A)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"5884",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Cancel (B)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"1",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"Return (C)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"19",
                     "separator":true
                  }
               ]
            },
            {
               "type":"Column",
               "items":[
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"NET Re Count (A-B-C)",
                     "weight":"bolder"
                  },
                  {
                     "type":"TextBlock",
                     "isSubtle":true,
                     "width":"stretch",
                     "text":"5864",
                     "separator":true
                  }
               ]
            }
         ]
      }
   ]
}

Output:

enter image description here

How to get complete text in all columns or How to increase width of column?

Update-1:

After changing width: 'stretch' to width: 'auto' in designer it working fine even after selecting host app as Microsoft Teams. But not working on actual teams application.

Any suggestions?

Expected Output:

enter image description here


Solution

  • While you cannot widen your Adaptive Cards like Manish said, you can wrap the text so that each cell becomes taller as needed. In order to format the cells into neat rows instead of just columns, you can use a separate column set for each row as explained in this answer: Is there a way I can give column padding to an adaptive card- Adaptive MS BOT