Long Words not Wrapping in User Activity Page


#1

Reproduction Steps:

  1. Bookmark this topic: Allow for pre-registration of fully activated accounts via API without user interaction

  2. Check your bookmarks page, and you will see something similar to:

Possible Root Cause

This page is styled using a table layout. I found this commit that removes display: table on the parent container but display: table-row / table-cell are still applied to the children. By default, The widths of the table and its cells are adjusted to fit the content, and thus the right side is wider than expected.

Possible Solutions

  1. Revert this commit and add table-layout: fixed, so that the content of the table cells will not affect the width of the table.

  2. Drop the table layout completely, and restyle this page with other CSS techniques. (maybe float? I confess I am no expert in CSS)

I’d be happy to PR this fix once we have decided a general direction.


(Sam Saffron) #2

I would recommend simply reverting the commit @codinghorror ?


(Jeff Atwood) #3

Why not just add word-break: break-word; to the CSS of the HTML element container? Much simpler.


#4

Also looked into that option. Although it fixes the issue, but I think that’s neither needed nor intended, from a semantic point of view.

word-wrap: break-word works just fine on mobile, because it’s not using the table layout:

.

If we were to continue using the table layout, IMHO, table-layout: fixed is the right fix. But again, I’m just laying out the options here.


(Jeff Atwood) #5

Probably good to keep layout more similar to mobile so go ahead with that.


#6

PR’s up


Screenshot


(Jeff Atwood) #7

Hmm this regressed on iPad, now it is exceeding the available space and making everything tiny.


#8

I’ll take a look right now


Found out why it’s acting up. @codinghorror best to illustrate with an example that mimics the layout of the user activity page:

So I am suggesting to remove width: 900px on .user-right.


(Jeff Atwood) #9

Sure feel free to submit PR on that!


#10

PR round 2:

Sorry about that!

CSS bites… when I am not careful enough…

(Robin Ward) #11

This really broke the user page, so I reverted it this morning. There was a huge amount of whitespace between everything.

Did you test this PR before making it?


#12

I certainly tested it with everything I had on OSX. ~On which platforms and browsers were this broken?~


Oh it’s a different tab. :man_facepalming:

image

This is the CSS for the right column on preferences tab: it has two width properties. I dropped the 900px and the 170px took effect. How did this work before…

Will go through user.scss carefully and have a more complete PR up; will also have someone else test the view this time.


(Jeff Atwood) #13

I strongly urge you to reconsider word-break: break-word; given that

  • we broke ipad on this already
  • we’ve broken it further with each CSS change

(David Taylor) #14

It’s already there:
46


(Jeff Atwood) #15

I don’t think it’s on the correct element, because in my F12 browser testing I had to add it another place for it to work (unless it got added recently).


#16

That’s the correct element; it has word-wrap: break_word set but not break-word: break-word.

word-wrap on its own should work, but it failed to do the job because:

This page is styled using a table layout. … By default, The widths of the table and its cells are adjusted to fit the content, and thus the right side is wider than expected.


I know I am guilty of breaking it twice :frowning::

  • It shouldn’t need to have word-break: break-word.
  • Some inconsistencies in the existing CSS bit us. i.e. setting two different widths for the same element at two different places. This could potentially cause more problems but “luckily” everything just works right now.
  • Although going through user.scss may take some time and some serious testing / review, maybe it will help in the long run?

But again: I agree with you, that word-break: break-word can make it work, and I agree making it work is a priority.

What do you think?


#18

One last attempt to fix it following the table layout rules.

Should this fail to work / cause any other new problems, I will revert everything and use word-break: break-word.


@David_Taylor and I both tested the change to make sure it a) fixes the previous bugs and b) does not cause new bugs. Mad props to him. :tada:


(Jeff Atwood) #19