CODEWITHSUNDEEP
c#.netmicrosoft-teamsadaptive-cards
Priya
Priya

Reputation: 151

how to increase the size of the adaptive card?

I have used an adaptive card to show data on a table format. There are four columns showed on the adaptive card. On Bot framework emulator it shows proper data as shown image. On bot framework emulator it shows proper column data. But when it deployed on teams, Its last column data get truncated, How to solve it? how to increase the size of the adaptive card?

BotframeworkImage

TeamsImage

Upvotes: 2

Views: 5993

Answers (2)

Christopher Cashell
Christopher Cashell

Reputation: 800

The "Full Width" Adaptive Card functionality was released at some point and is now available. I haven't tested it with columns like you're using, but it might help with this situation.

Microsoft has documented how it works:

Constructing full width cards

To make a full width Adaptive card the width object in msteams property in the card content must be set to Full. In addition, your app must include the following elements:

{
    "type": "AdaptiveCard",
    "body": [{
        "type": "Container",
        "items": [{
            "type": "TextBlock",
            "text": "Digest card",
            "size": "Large",
            "weight": "Bolder"
        }]
    }],

    "msteams": {
        "width": "Full"
    },
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

Upvotes: 1

Andrew Clear
Andrew Clear

Reputation: 8020

The width of Adaptive Cards in the Teams client is determined by the Teams client itself based on the current viewing area width - you cannot directly influence this value. To make that card work you're going to need to explore alternative methods (shortening the format of the date field looks like it should get you there, at least on desktop clients). I'd make sure you're using the card editor available in App Studio to test your card designs, and actually sending them to yourself so that you can test them across the various clients (web, desktop, Android, iOS).

Upvotes: 1

Related Questions