Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Words or links that are longer than the text box is wide don't wrap in message boxes #1774

Closed
RAHarris opened this issue Feb 28, 2019 · 7 comments
Closed

Words or links that are longer than the text box is wide don't wrap in message boxes #1774

RAHarris opened this issue Feb 28, 2019 · 7 comments
Labels
bug Indicates an unexpected problem or an unintended behavior. front-burner p1 Painful if we don't fix, won't block releasing size-s 1 days or less

Comments

@RAHarris
Copy link

Repro steps: go to the demo page https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle/ and for the user message type "https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/". The last part of the URL doesn't show up in the user or bot message boxes.

This could be fixed by adding "word-break: break-all;" as a style to .row.message elements
@corinagum
Copy link
Contributor

Thanks for reporting this find.

image

To clarify for the fixer, the string must have no spaces for it to repro on (a) word. There seems to be a max of about 70-80 characters before the string gets cut.

@corinagum corinagum added bug Indicates an unexpected problem or an unintended behavior. 4.4 p1 Painful if we don't fix, won't block releasing front-burner labels Mar 7, 2019
@compulim
Copy link
Contributor

compulim commented Mar 7, 2019 •
edited
Loading

@RAHarris word wrapping is hard. Forcing text into a box is a hard question. 😉

I tested the following HTML code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
    <p>https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/</p>
  </body>
</html>

It is not wrapped, but scrolled/clipped. I would prefer to follow default behavior of HTML.

So I would prefer to either:

  1. Keep it as-is (clipped)
  2. Add a scroll bar inside the bubble (clipped but scrollable)

On the other hand, if you prefer word-break: break-all, you can set it thru styleSet.

Do you know how other messaging apps works in this case? E.g. iMessage, WhatsApp, Facebook Messenger, Skype, LINE.

@corinagum corinagum added the needs-design-input UX/UI design item label Mar 14, 2019
@corinagum
Copy link
Contributor

@mewa1024 and @DesignPolice, do we have a design preference on whether the text of URLs is clipped, scrolled, or wrapped? It looks like @compulim's preferred way is to keep it clipped.

@mewa1024
Copy link

@corinagum I don't have a strong preference off the top of my head, but I think enabling the user to word-break by customizing WebChat seems fine as a P1. Sometimes truncation has a tooltip that shows the full value, but that would only for links, not for reallylongwordsthatarenotlinksandthereforehavenohoverstatetooltips.

@corinagum
Copy link
Contributor

Thanks for the input. Temporarily assigning @compulim so he can add in a rebuttal, if he wishes.

@compulim
Copy link
Contributor

compulim commented Mar 14, 2019 •
edited
Loading

Agree with @mewa1024, tooltip is tricky here:

  • Tooltip can be added everywhere in HTML using <span title="This is tooltip">pneumonoultramicroscopicsilicovolcanoconiosis</span>
  • But we can't easily differentiate which area need to add tooltip (no clear boundary)
  • Conclusion, can't add tooltip

I see Teams and WhatsApp is also breaking up long words. Didn't check other messaging apps yet.

I am okay to add a styleOptions:

  • messageActivityWordBreak can be set to normal, break-all, or keep-all, based on the equivalent CSS style
    • Default is normal or break-all

@corinagum corinagum added size-s 1 days or less and removed Pending labels Mar 14, 2019
@mewa1024 mewa1024 removed the needs-design-input UX/UI design item label Mar 15, 2019
@corinagum
Copy link
Contributor

Going with break-word -- better experience overall

@corinagum corinagum mentioned this issue Mar 21, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Indicates an unexpected problem or an unintended behavior. front-burner p1 Painful if we don't fix, won't block releasing size-s 1 days or less
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@RAHarris @compulim @corinagum @mewa1024 @DesignPolice