title: Is there a way I can give column padding to an adaptive card- Adaptive MS BOT
body: <p>I'm using an adaptive card to display dynamic content in a  table using the, adaptive-cards templating package.</p>
  <p>I have been to customize it but one column is still refusing to fall in place, the column would always have more content than others. So it's falling out of rows, therefore expanding the table and making it look ugly.[![enter image description here][1]][1]</p>
  <pre><code>async testTableData(context) {
  var tablePayLoad = {
    $schema: &quot;http://adaptivecards.io/schemas/adaptive-card.json&quot;,
    &quot;type&quot;: &quot;AdaptiveCard&quot;,
    &quot;version&quot;: &quot;1.0&quot;,
    &quot;body&quot;: [
      {
        &quot;type&quot;: &quot;TextBlock&quot;,
        &quot;weight&quot;: &quot;bolder&quot;,
        &quot;size&quot;: &quot;Medium&quot;,
        &quot;text&quot;: &quot;Details&quot;,
        &quot;horizontalAlignment&quot;: &quot;left&quot;,
        &quot;separator&quot;: true,
      },
      //Databody
      {
        &quot;type&quot;: &quot;ColumnSet&quot;,
        &quot;separator&quot;: true,
        &quot;bleed&quot;: true,
        &quot;spacing&quot;: &quot;Padding&quot;,
        &quot;columns&quot;: [
          //Name
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
  
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;Name&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;separator&quot;: true,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${Name}&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
            ],
          },
          //Mobile NO
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
  
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;Mobile No&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;separator&quot;: true,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${MobileNo}&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
            ],
          },
          //Email Address
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
  
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;Email&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;separator&quot;: true,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${Email}&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
            ],
          },
          //DOB
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
            &quot;width&quot;: &quot;auto&quot;,
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;D.O.B&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;separator&quot;: true,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${DOB}&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
            ],
          },
  
          //House Address
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
  
            &quot;bleed&quot;: true,
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;Address&quot;,
                horizontalAlignment: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;separator&quot;: true,
                wrap: true,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;${HouseAddress}&quot;,
                horizontalAlignment: &quot;center&quot;,
              },
            ],
          },
          //Location
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
  
            &quot;bleed&quot;: true,
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;Branch&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;separator&quot;: true,
                &quot;wrap&quot;: true,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;text&quot;: &quot;${Location}&quot;,
              },
            ],
          },
        ],
      },
  
      {
        &quot;type&quot;: &quot;TextBlock&quot;,
        &quot;weight&quot;: &quot;bolder&quot;,
        &quot;size&quot;: &quot;Medium&quot;,
        &quot;text&quot;: &quot;Trans.&quot;,
        &quot;horizontalAlignment&quot;: &quot;left&quot;,
        &quot;spacing&quot;: &quot;extraLarge&quot;,
        &quot;separator&quot;: true,
      },
  
      //Trans.
      {
        &quot;type&quot;: &quot;ColumnSet&quot;,
        &quot;separator&quot;: true,
        &quot;bleed&quot;: true,
        &quot;spacing&quot;: &quot;Padding&quot;,
        &quot;columns&quot;: [
          //Amount
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;separator&quot;: true,
            &quot;width&quot;: &quot;auto&quot;,
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;text&quot;: &quot;Amount&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                $data: &quot;${Trans}&quot;,
                &quot;separator&quot;: true,
                &quot;text&quot;: &quot;${Amount}&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;spacing&quot;: &quot;ExtraLarge&quot;,
              },
            ],
          },
          //Type
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;width&quot;: &quot;auto&quot;,
            &quot;separator&quot;: true,
  
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;text&quot;: &quot;Type&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                $data: &quot;${Trans}&quot;,
                &quot;separator&quot;: true,
                &quot;text&quot;: &quot;${Type}&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;spacing&quot;: &quot;ExtraLarge&quot;,
              },
            ],
          },
          //Currency
          {
            &quot;type&quot;: &quot;Column&quot;,
            &quot;width&quot;: &quot;auto&quot;,
            &quot;separator&quot;: true,
  
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;text&quot;: &quot;Currency&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                $data: &quot;${Trans}&quot;,
                &quot;separator&quot;: true,
                &quot;size&quot;: &quot;small&quot;,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${Currency}&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;spacing&quot;: &quot;ExtraLarge&quot;,
              },
            ],
          },
          //Date
          {
            &quot;type&quot;: &quot;Column&quot;,
            //   &quot;bleed&quot;: true,
            //   width: &quot;auto&quot;,
  
            &quot;separator&quot;: true,
  
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;text&quot;: &quot;Date&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;wrap&quot;: true,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                $data: &quot;${Trans}&quot;,
                &quot;separator&quot;: true,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${Date}&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;spacing&quot;: &quot;ExtraLarge&quot;,
              },
            ],
          },
  
          //Comment
          {
            &quot;type&quot;: &quot;Column&quot;,
            //   width: &quot;stretch&quot;,
            &quot;separator&quot;: true,
            //   &quot;bleed&quot;: true,
            &quot;items&quot;: [
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                &quot;size&quot;: &quot;small&quot;,
                &quot;weight&quot;: &quot;bolder&quot;,
                &quot;text&quot;: &quot;Comment&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
              {
                &quot;type&quot;: &quot;TextBlock&quot;,
                $data: &quot;${Trans}&quot;,
                &quot;separator&quot;: true,
                &quot;size&quot;: &quot;small&quot;,
                &quot;wrap&quot;: true,
                &quot;text&quot;: &quot;${Comments}&quot;,
                &quot;spacing&quot;: &quot;ExtraLarge&quot;,
                &quot;horizontalAlignment&quot;: &quot;center&quot;,
              },
            ],
          },
        ],
      },
    ],
  };
  
  // Create a Template instance from the table payload
  var template = new ACData.Template(tablePayLoad);
  
  // Expand the template with your `$root` data object.
  // This binds it to the data and produces the final Adaptive Card payload
  
  var data = [
    {
      Amount: &quot;6000&quot;,
      Type: &quot;C&quot;,
      Currency: &quot;NGN&quot;,
      Date: &quot;2019-07-19T00:00:00Z&quot;,
      Comments: &quot;Just a regular comment here&quot;,
    },
    {
      Amount: &quot;6000&quot;,
      Type: &quot;C&quot;,
      Currency: &quot;NGN&quot;,
      Date: &quot;2019-07-19T00:00:00Z&quot;,
      Comments: &quot;Just another Comment here&quot;,
    },
  ];
  var dob = new Date(&quot;1990-05-29T00:00:00Z&quot;);
  
  var tableCardPayload = template.expand({
    $root: {
      Name: &quot;JOHN DOE&quot;,
      MobileNo: &quot;2349082182323&quot;,
      Email: &quot;admin@doe.com&quot;,
      DOB: dob.toLocaleDateString(),
      HouseAddress: &quot;16, Lagos Street, Lagos&quot;,
      Location: &quot;Universe&quot;,
      Trans: data,
    },
  });
  
  const cardToLoad = CardFactory.adaptiveCard(tableCardPayload);
  
  await context
    .sendActivity({ attachments: [cardToLoad] })
    .then()
    .catch((err) =&gt; {
      console.log(err);
    });
  </code></pre>
  <p>},</p>