Forum Discussion

rosrene's avatar
rosrene
Brass Contributor
Jan 28, 2022

Action Card Teams wrap text button

hello, I have a bot in teams that sends an action card with options on buttons, the problem is that the texts of the buttons are cut off:

 

hello, I have a bot in teams that sends an action card with options on buttons, the problem is that their texts are cut off as seen in the images

 

I do not use adaptive card because they limit me to only 6 buttons and I require more, on the other hand it does not have the functionality to navigate the options to the sides

I need the text to be complete in several lines or have a tooltip that shows the complete text

 

The code I use to send the action card is:

 

var herocard = new HeroCard();
herocard.Title = answers[0].Answer;

List<CardAction> buttons = new List<CardAction>();
var sortedPrompts = prompts.OrderBy(r => r.DisplayText);
foreach (var items in sortedPrompts)
{
buttons.Add(new CardAction()
{
Type = ActionTypes.MessageBack,
Title = items.DisplayText,
DisplayText = items.DisplayText,
Text = items.DisplayText,
Value = items.DisplayText,
});
}
herocard.Buttons = buttons;

var response = stepContext.Context.Activity.CreateReply();
response.Attachments = new List<Microsoft.Bot.Schema.Attachment>() { herocard.ToAttachment() };
await stepContext.Context.SendActivityAsync(response);

 

I welcome your comments and help.

  • rosrene - We are tried it from our end ,It's working fine for us. Could you please try it once as per given code snippet:-

       public static HeroCard GetHeroCard()
            {
                var heroCard = new HeroCard
                {
                    Title = "Hero Card",
                    Text = "from text/sms to Skype, Slack, Office 365 mail and other popular services.",
                    Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://www.devenvexe.com"), new CardAction(ActionTypes.OpenUrl, "C# Corner", value: "http://www.c-sharpcorner.com/members/suthahar-j"), new CardAction(ActionTypes.OpenUrl, "MSDN", value: "https://social.msdn.microsoft.com/profile/j%20suthahar/"), new CardAction(ActionTypes.OpenUrl, "Remove subscription button don't take any action when user pressed enter via ", value: "https://social.msdn.microsoft.com/profile/j%20suthahar/") }
                
            };
    
                return heroCard;
            }

    Microsoft Teams Version 1.5.00.2567 (64-bit)

    Let us know if you have any query.

    • fmolina5656's avatar
      fmolina5656
      Copper Contributor

      Sayali-MSFT 

      Hello, try to place the code above and continue in the same way.

      The code I used was:

       

        var heroCard = new HeroCard
                  {
                      Title = "Hero Card",
                      Text = "from text/sms to Skype, Slack, Office 365 mail and other popular services.",
                      Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://www.devenvexe.com"), new CardAction(ActionTypes.OpenUrl, "C# Corner", value: "http://www.c-sharpcorner.com/members/suthahar-j"), new CardAction(ActionTypes.OpenUrl, "MSDN", value: "https://social.msdn.microsoft.com/profile/j%20suthahar/"), new CardAction(ActionTypes.OpenUrl, "Remove subscription button don't take any action when user pressed enter via ", value: "https://social.msdn.microsoft.com/profile/j%20suthahar/") }
      
                  };
                  var reply = MessageFactory.Attachment(heroCard.ToAttachment());
                  await stepContext.Context.SendActivityAsync(reply, cancellationToken);

       

      However, the images and cards look like this:

       

       

       

  • rosrene - Could you please confirm if your issue has resolved with above suggestion or still looking for any help?
    • rosrene's avatar
      rosrene
      Brass Contributor
      hello Sayali-MSFT, the problem continues in the buttons with long text the text is cut off, as seen in the images. fmolina5656 is a co-worker and works on the problem too
    • rosrene's avatar
      rosrene
      Brass Contributor
      Hi, the problem is that the text of the button is cut, we want it to be displayed completely by continuing on a second line or showing a tooltip
      • Sayali-MSFT's avatar
        Sayali-MSFT
        Icon for Microsoft rankMicrosoft

        rosrene - Using the above code when you hover the mouse on button It will show whole text.Could you check it once?
        Microsoft Teams Version 1.5.00.3154 (64-bit)

Share

Resources