Action Card Teams wrap text button

%3CLINGO-SUB%20id%3D%22lingo-sub-3077120%22%20slang%3D%22es-ES%22%3EAction%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3077120%22%20slang%3D%22es-ES%22%3E%3CP%3Ehello%2C%20I%20have%20a%20bot%20in%20teams%20that%20sends%20an%20action%20card%20with%20options%20on%20buttons%2C%20the%20problem%20is%20that%20the%20texts%20of%20the%20buttons%20are%20cut%20off%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22rosrene_0-1643344178078.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F343265iC7A40046071E8CE8%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22rosrene_0-1643344178078.png%22%20alt%3D%22rosrene_0-1643344178078.png%22%20%2F%3E%3C%2FSPAN%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22rosrene_1-1643344213810.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F343266i31B794CCB65C70B4%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22rosrene_1-1643344213810.png%22%20alt%3D%22rosrene_1-1643344213810.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3Ehello%2C%20I%20have%20a%20bot%20in%20teams%20that%20sends%20an%20action%20card%20with%20options%20on%20buttons%2C%20the%20problem%20is%20that%20their%20texts%20are%20cut%20off%20as%20seen%20in%20the%20images%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20do%20not%20use%20adaptive%20card%20because%20they%20limit%20me%20to%20only%206%20buttons%20and%20I%20require%20more%2C%20on%20the%20other%20hand%20it%20does%20not%20have%20the%20functionality%20to%20navigate%20the%20options%20to%20the%20sides%3C%2FP%3E%3CP%3EI%20need%20the%20text%20to%20be%20complete%20in%20several%20lines%20or%20have%20a%20tooltip%20that%20shows%20the%20complete%20text%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20code%20I%20use%20to%20send%20the%20action%20card%20is%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Evar%20herocard%20%3D%20new%20HeroCard()%3B%20%3CBR%20%2F%3E%20herocard.%20Title%20%3D%20answers%5B0%5D.%20Answer%3B%3C%2FP%3E%3CP%3EList%3CCARDACTION%3E%20buttons%20%3D%20new%20List%3CCARDACTION%3E()%3B%20%3CBR%20%2F%3E%20var%20sortedPrompts%20%3D%20prompts.%20OrderBy(r%20%3D%26gt%3B%20r.DisplayText)%3B%20%3CBR%20%2F%3E%20foreach%20(var%20items%20in%20sortedPrompts)%20%3CBR%20%2F%3E%20%7B%20%3CBR%20%2F%3E%20buttons.%20Add(new%20CardAction()%20%3CBR%20%2F%3E%20%7B%20%3CBR%20%2F%3E%20Type%20%3D%20ActionTypes.MessageBack%2C%20%3CBR%20%2F%3E%20Title%20%3D%20items.%20DisplayText%2C%20%3CBR%20%2F%3E%20DisplayText%20%3D%20items.%20DisplayText%2C%20%3CBR%20%2F%3E%20Text%20%3D%20items.%20DisplayText%2C%20%3CBR%20%2F%3E%20Value%20%3D%20items.%20DisplayText%2C%20%3CBR%20%2F%3E%20%7D)%3B%20%3CBR%20%2F%3E%20%7D%20%3CBR%20%2F%3E%20herocard.%20Buttons%20%3D%20buttons%3B%3C%2FCARDACTION%3E%20%3C%2FCARDACTION%3E%3C%2FP%3E%3CP%3Evar%20response%20%3D%20stepContext.Context.Activity.CreateReply()%3B%20%3CBR%20%2F%3E%20response.%20Attachments%20%3D%20new%20List%3CMICROSOFT.BOT.SCHEMA.ATTACHMENT%3E()%20%7B%20herocard.%20Toattachment()%20%7D%3B%20%3CBR%20%2F%3E%20await%20stepContext.Context.SendActivityAsync(response)%3B%3C%2FMICROSOFT.BOT.SCHEMA.ATTACHMENT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20welcome%20your%20comments%20and%20help.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3077120%22%20slang%3D%22es-ES%22%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3078128%22%20slang%3D%22en-US%22%3ERe%3A%20Action%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3078128%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1182752%22%20target%3D%22_blank%22%3E%40rosrene%3C%2FA%3E-We%20are%20looking%20into%20this%20I%20will%20get%20back%20to%20you%20soon.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3098234%22%20slang%3D%22en-US%22%3ERe%3A%20Action%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3098234%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1182752%22%20target%3D%22_blank%22%3E%40rosrene%3C%2FA%3E%26nbsp%3B-%20We%20are%20tried%20it%20from%20our%20end%20%2CIt's%20working%20fine%20for%20us.%20Could%20you%20please%20try%20it%20once%20as%20per%20given%20code%20snippet%3A-%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%20%20%20public%20static%20HeroCard%20GetHeroCard()%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20heroCard%20%3D%20new%20HeroCard%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Title%20%3D%20%22Hero%20Card%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Text%20%3D%20%22from%20text%2Fsms%20to%20Skype%2C%20Slack%2C%20Office%20365%20mail%20and%20other%20popular%20services.%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Buttons%20%3D%20new%20List%3CCARDACTION%3E%20%7B%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22Learn%20More%22%2C%20value%3A%20%22http%3A%2F%2Fwww.devenvexe.com%22)%2C%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22C%23%20Corner%22%2C%20value%3A%20%22http%3A%2F%2Fwww.c-sharpcorner.com%2Fmembers%2Fsuthahar-j%22)%2C%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22MSDN%22%2C%20value%3A%20%22https%3A%2F%2Fsocial.msdn.microsoft.com%2Fprofile%2Fj%2520suthahar%2F%22)%2C%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22Remove%20subscription%20button%20don't%20take%20any%20action%20when%20user%20pressed%20enter%20via%20%22%2C%20value%3A%20%22https%3A%2F%2Fsocial.msdn.microsoft.com%2Fprofile%2Fj%2520suthahar%2F%22)%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%7D%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20heroCard%3B%0A%20%20%20%20%20%20%20%20%7D%3C%2FCARDACTION%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22wrap1.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F344140i933DFFF3BDC1DDC7%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22wrap1.png%22%20alt%3D%22wrap1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%3EMicrosoft%20Teams%20Version%201.5.00.2567%20(64-bit)%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ELet%20us%20know%20if%20you%20have%20any%20query.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3101560%22%20slang%3D%22en-US%22%3ERe%3A%20Action%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3101560%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1202096%22%20target%3D%22_blank%22%3E%40Sayali-MSFT%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHello%2C%20try%20to%20place%20the%20code%20above%20and%20continue%20in%20the%20same%20way.%3C%2FP%3E%3CP%3EThe%20code%20I%20used%20was%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3E%20%20var%20heroCard%20%3D%20new%20HeroCard%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Title%20%3D%20%22Hero%20Card%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Text%20%3D%20%22from%20text%2Fsms%20to%20Skype%2C%20Slack%2C%20Office%20365%20mail%20and%20other%20popular%20services.%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Buttons%20%3D%20new%20List%3CCARDACTION%3E%20%7B%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22Learn%20More%22%2C%20value%3A%20%22http%3A%2F%2Fwww.devenvexe.com%22)%2C%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22C%23%20Corner%22%2C%20value%3A%20%22http%3A%2F%2Fwww.c-sharpcorner.com%2Fmembers%2Fsuthahar-j%22)%2C%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22MSDN%22%2C%20value%3A%20%22https%3A%2F%2Fsocial.msdn.microsoft.com%2Fprofile%2Fj%2520suthahar%2F%22)%2C%20new%20CardAction(ActionTypes.OpenUrl%2C%20%22Remove%20subscription%20button%20don't%20take%20any%20action%20when%20user%20pressed%20enter%20via%20%22%2C%20value%3A%20%22https%3A%2F%2Fsocial.msdn.microsoft.com%2Fprofile%2Fj%2520suthahar%2F%22)%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20reply%20%3D%20MessageFactory.Attachment(heroCard.ToAttachment())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20await%20stepContext.Context.SendActivityAsync(reply%2C%20cancellationToken)%3B%3C%2FCARDACTION%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%2C%20the%20images%20and%20cards%20look%20like%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22fmolina5656_0-1643751665055.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F344350iB8188D7A4D370B3D%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22fmolina5656_0-1643751665055.png%22%20alt%3D%22fmolina5656_0-1643751665055.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3104219%22%20slang%3D%22en-US%22%3ERe%3A%20Action%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3104219%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1182752%22%20target%3D%22_blank%22%3E%40rosrene%3C%2FA%3E%20-%20Could%20you%20please%20confirm%20if%20your%20issue%20has%20resolved%20with%20above%20suggestion%20or%20still%20looking%20for%20any%20help%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3104222%22%20slang%3D%22en-US%22%3ERe%3A%20Action%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3104222%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1294003%22%20target%3D%22_blank%22%3E%40fmolina5656%3C%2FA%3E%20-%20Your%20issue%20has%20resolved%20with%20above%20suggestion%20or%20still%20looking%20for%20any%20help%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3104491%22%20slang%3D%22es-ES%22%3ERe%3A%20Action%20Card%20Teams%20wrap%20text%20button%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3104491%22%20slang%3D%22es-ES%22%3Ehello%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1202096%22%20target%3D%22_blank%22%3E%40Sayali-MSFT%3C%2FA%3E%2C%20the%20problem%20continues%20in%20the%20buttons%20with%20long%20text%20the%20text%20is%20cut%20off%2C%20as%20seen%20in%20the%20images.%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1294003%22%20target%3D%22_blank%22%3E%40fmolina5656%3C%2FA%3E%20is%20a%20co-worker%20and%20works%20on%20the%20problem%20too%3C%2FLINGO-BODY%3E
Occasional Contributor

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:

 

rosrene_0-1643344178078.pngrosrene_1-1643344213810.png

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.

20 Replies
@rosrene-We are looking into this I will get back to you soon.

@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;
        }

wrap1.png

Microsoft Teams Version 1.5.00.2567 (64-bit)

Let us know if you have any query.

@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:

 

fmolina5656_0-1643751665055.png

 

 

@rosrene - Could you please confirm if your issue has resolved with above suggestion or still looking for any help?
@fmolina5656 - Your issue has resolved with above suggestion or still looking for any help?
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
@fmolina5656 - here as you mention the button text wrapping properly in card. Could you just confirm the card is render as per you expected(Wrap Text) or looking any help?
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

@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)
Tooltip1.png

hello @Sayali-MSFT, my problem continues, I don't see tooltips in the texts that are cut off, the latest version available for download is 1.4.00.35564 I didn't find 1.5.00.3154 to download, could you provide me with a download link?
Thank you
Sorry @Sayali-MSFT, downloaded version 1.5.00.3164 from https://statics.teams.cdn.office.net/production-windows-x64/1.5.00.3154/Teams_windows_x64.exe but still the tooltip does not appear
@rosrene-Have you tried out with above sample which fmolina5656 mention?
@Sayali-MSFT yes, we are testing with the code that you shared with @fmolina5656 and the same version of Teams App but the Tip roll does not appear and the card visually has differences between the image that you sent us and the one that fmolina5656 shared, could you share with us the project of vs that you are publishing to see if we find any difference?

@rosrene- Please have a look at this documents-                                                            1. https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/06.using-cards/C...
2. https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/50.teams-messagi...
Let us know if you have any query.

@rosrene- Did you get chance to try on the above suggested solution?

Hi @Sayali-MSFT,  

Sorry for the delay, I have been doing several tests and I identified that:

the example provided from the repository https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/csharp_dotnetcore/06.using-cards/C... works correctly and the tooltip is seen in long texts

 

rosrene_0-1644988406480.png

 

in this example the action type is an OpenURL

 

rosrene_1-1644988567795.png

if the action type is changed to messageback which we need, then the tooltip doesn't appear

rosrene_2-1644988750265.png

 

rosrene_3-1644988796889.png

I think that now we have the concrete cause, we need to see how to solve it
Thanks

@Sayali-MSFT hi, any update?

@rosrene - There doesn't seem to be any alternative for this.

@Sayali-MSFT hi, any update?