How to To maximize the width of an Adaptive Card in Teams

(2) Share

Report

Posted on by XL-20090300-0

I have a Copilot Studio that uses Adaptive Cards to provide feedback on some table content in Teams, but I noticed that the width of my table is much smaller than I expected.
The screenshot is my table display, but the table in Figure 2 is very wide.
This is my code, I need help~

{
    "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "msteams": {
        "width": "full"
    },
    "version": "1.5",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列1",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容A"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列2",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容B"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列3",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容C"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列4",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容D"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列5",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容E"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列6",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容F"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列7",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "这是一个内容比较多的单元格，内容长度不少于二十个字，可以展示更多信息。"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "列8",
                            "weight": "Bolder"
                        },
                        {
                            "type": "TextBlock",
                            "text": "内容H"
                        }
                    ]
                }
            ]
        }
    ],
    "msTeams": {
        "width": "full"
    }
}

Categories:

Building Copilot Studio chatbots in Microsoft Teams

I have the same question (0)

All responses (2)

Answers (0)

Giraldoj 872 Moderator on at

Like (0)

Report
Copy link

Link copied!

Hi there,

This is the property that controls the width of the coumns in your adaptive card

"type": "Column",
"width": "stretch",

try changing the width of your columns to "width": "2", or "width": "3", and see how it looks.

Was this reply helpful? Yes No
Suggested answer

DAnny3211 138 on at

Like (0)

Report
Copy link

Link copied!
Hi, To maximize the width of an Adaptive Card in Microsoft Teams, you're already on the right track by including `"msteams": { "width": "full" }` in your payload. However, there are a few additional considerations that might help improve the rendering: 1. **Ensure you're using the correct casing and placement**: While you’ve included both `"msteams"` and `"msTeams"` objects, only one is necessary. The correct casing is `"msteams"` (all lowercase), and it should be placed at the root level of the card JSON. You can safely remove the `"msTeams"` object to avoid confusion. 2. **Column width behavior**: Even with `"width": "stretch"` on each column, Teams has a maximum width for Adaptive Cards, especially in chat contexts. If the card is posted in a narrow layout (like a chat message), it may still appear constrained. Posting the card in a wider context, such as a channel tab or task module, can help utilize more horizontal space. 3. **Consider using a `Container` with `isVisible` and `bleed`**: While not directly related to width, using `Container` elements with `bleed: true` and proper `style` settings can help reduce padding and make better use of space. 4. **Teams client limitations**: Keep in mind that Teams may impose its own layout constraints that override some Adaptive Card settings. Testing in different contexts (chat, channel, task module) can help identify the most suitable display option. For further reference, you might find this Microsoft documentation helpful: - https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference Thanks and best regards, Daniele Note: This response was prepared with support from Copilot to ensure clarity and completeness.

Was this reply helpful? Yes No