Mayuresh Jaiswal
Mayuresh Jaiswal

Reputation: 349

Adaptive card column sizing not working in bot framework c#

I want to have 2 columns with 1st column having width 20% and other column to have width 80%, but it seems the size property is not getting applied to bot framework 3.0 in Microsoft Teams adaptive card. Below is the response i'm getting but still its getting divided on 50-50% size blocks.

  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "0.5",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "size": 1,
          "items": [
            { "type": "Image",
              "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
              "size": "small",
              "style": "person"
            }
          ]
        },
        {
          "type": "Column",
          "width": 5,
          "items": [
            {
              "type": "TextBlock",
              "text": "Matt Hidinger",
              "weight": "bolder",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "spacing": "none",
              "text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
              "isSubtle": true,
              "wrap": true
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit"
    }
  ]
} ```

Upvotes: 0

Views: 496

Answers (1)

Matt Hidinger
Matt Hidinger

Reputation: 1753

The first column is (incorrectly) using a size property, but it should be width

This should achieve a 20/80 weight

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 20,
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 80,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Matt Hidinger",
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "Created {{DATE(2017-02-14T06:08:39Z, SHORT)}}",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ]
}

Upvotes: 1

Related Questions