Adaptive card action button text & UI trimmed inside the MS Team Channel

Question

I'm having an issue where buttons and actions in ms teams adaptive cards won’t wrap text inside the action button. The button UI is completely broken even if we are applied " full: width" in MS Team. I know the "Wrap: true || false" we can add inside the adaptive card body or title of the textblock, Is there any other way to handle this type of scenario in the action button title in MS Team channel.

The following code we are using for the adaptive card implementation.

public static Attachment ChoiceMenu(string channelType, string text, List buttons, string subCategory = null)
{
    var menuCard = new AdaptiveCard("1.2");

    if(!string.IsNullOrEmpty(subCategory))
    {
        menuCard.Body.Add(new AdaptiveTextBlock()
        {
            Text = subCategory,
            Size = AdaptiveTextSize.Large,
            Wrap = true,
        });
    }

    menuCard.Body.Add(new AdaptiveTextBlock()
    {
        Text = text,
        Wrap = true,
    });

    foreach (var button in buttons)
    {
        var columns = new AdaptiveColumnSet();
        menuCard.Body.Add(columns);

        var userCategory = new AdaptiveColumn();
        columns.Columns.Add(userCategory);

        var actionType = new AdaptiveActionSet();
        userCategory.Items.Add(actionType);

        var submitAction = new AdaptiveSubmitAction()
        {
            Title = button,
            Id = button
        };

        if (channelType == Channels.Msteams)
        {
            submitAction.Data = new AdaptiveCardDataObjectForTeams()
            {
                MsTeams = new MsTeamsObject()
                {
                    Type = ActionTypes.MessageBack,
                    DisplayText = button,
                    Text = button
                }
            };
        }
        else
        {
            submitAction.Data = button;
        }

        actionType.Actions.Add(submitAction);
    }

    return new Attachment()
    {
        ContentType = AdaptiveCard.ContentType,
        Content = menuCard
    };
}

Platform

• Web ( MsTeams Web http://teams.microsoft.com ) Microsoft Teams
• Version 1.4.00.32771 (64-bit). It was last updated on 12/15/2021.

Adaptive Card Version

• 1.2

Answer 1

As per the Format cards in Microsoft Teams docs,

Cards support formatting in the text property only, not in the title or subtitle properties.

Note: The Action Button text is in the title property, This is the reason we cannot do any formatting for it. So there is no way to wrap text in the Action Button.

Alternate Solution:

We have changed the MS Team title of the button using the substring concatenation, hereafter the particular character will display "...", So this way we can alternatively fix this issue.

submitAction.Title = button.Length > 50 ? string.Concat(button.Substring(0, 50), "...") : button;

Output:

Reference:

• Github discussion