topic Re: View formatting issue in Community Site Feedback

View formatting issue

Anonymous — Thu, 17 Aug 2017 12:27:12 GMT

I'm seeing this when it wasn't there the last time I viewed the site about 45 mins ago! Any thoughts?

This is with all thread not just the one shown using this URL:

https://community.plus.net/t5/forums/unreadpostspage/tab/message:full

Re: View formatting issue

jab1 — Thu, 17 Aug 2017 12:51:08 GMT

Not much help, I know, but I don't have this problem in a 15" laptop.

Re: View formatting issue

Browni — Thu, 17 Aug 2017 12:57:00 GMT

I did see the problem when the post you have shown was unread, but now I've read it it doesn't show!

Re: View formatting issue

Anonymous — Thu, 17 Aug 2017 13:02:43 GMT

I don't think it is related to screen size but it could be depending on the CSS which is where I think the issue it. I'm on a 27" iMac running at 5120 x 2880 and I still see it even after a full refresh of the page.

Re: View formatting issue

jaread83 — Thu, 17 Aug 2017 13:02:58 GMT

Its because the characters being used as a seperator is being seen as a single word by your browser. Default CSS on <p> tags doesn't have word-break: break-all; applied to it because you don't want to break single words onto a new line if there isn't space, it will look for the next place where the word ends and flow the text to the next line at that point.

Not much I can do about that unless I set the word-break to make words that reach the end of the line go to a new line... which is not desirable. This is how all browsers treat this type of content.

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_paragraphs2

Add a long line of the same character without spaces and click 'run' - notice that you will now get a horizontal scroll bar, default browser behaviour.

Re: View formatting issue

Anonymous — Thu, 17 Aug 2017 13:12:37 GMT

@jaread83 - Thanks, but why has this suddenly become an issue as I said in the OP it wasn't there 45 minutes before I posted and my browser hasn't changed either! For what it's worth I'm running FF 54.0.1 (but an update is available) on OSX Sierra v10.12.5.

Viewing the URL with Safari produces the correct results!

Re: View formatting issue

jab1 — Thu, 17 Aug 2017 13:13:10 GMT

Probably a silly question, but does it happen on other forums (using Lithium), such as the TalkTalk one?

Re: View formatting issue

jaread83 — Thu, 17 Aug 2017 13:27:25 GMT

Very strange @Anonymous. I guess it depends how the browser but I found an article about it here: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@jab1, I have checked a few others and it varies on results. One community I checked the word-break CSS has been applied but then on another it hasn't and it produced the same results we are seeing here.
I am pushing an update tomorrow morning with some bits and bobs (will let you all know what exactly before then), leave this with me and I will see if I can get an extra fix into the release.

Re: View formatting issue

Browni — Thu, 17 Aug 2017 13:32:53 GMT

If I view the thread directly this is how it shows

It's only broken when using the link in post #1

eta: I'm using Palemoon x64

Re: View formatting issue

jaread83 — Thu, 17 Aug 2017 13:36:58 GMT

Its because the table has a class of 'lia-data-cell-primary' and the CSS is set to word-break: normal; This treats all text within it like normal text.
I have just applied a fix on our staging site - just going to copy and paste the post to test it now on the unread page over there.

Re: View formatting issue

Anonymous — Thu, 17 Aug 2017 13:40:13 GMT

Viewing the thread @Browni I get the same it was only visible on the 'view' I posted in the OP, having said that, I marked those messages as read and on arrival now everything is now as it should be. Most weird, maybe there's no need to do anything @jaread83 but I will make an update if this returns. I'm just confused as to why it happened.

Re: View formatting issue

Browni — Thu, 17 Aug 2017 13:41:19 GMT

@Anonymous I did say I saw the same issue as you when the post was unread, marking the thread as new lets me recreate the issue.

Re: View formatting issue

Anonymous — Thu, 17 Aug 2017 13:42:48 GMT

Yes, I saw that thanks, so edited my post.

Re: View formatting issue

jaread83 — Thu, 17 Aug 2017 13:44:03 GMT

I have fixed this and will be live tomorrow morning. Below is a screenshot of how a post like this would render from now on.

Re: View formatting issue

Browni — Thu, 17 Aug 2017 13:44:30 GMT

It's not peculiar to that thread either as this shows

Re: View formatting issue

jaread83 — Thu, 17 Aug 2017 13:46:11 GMT

@Browni, my fix will also fix this bug too. I have simply set the word-break CSS on the area so that it will stop words flowing outside the container and will break it to the next line when needed.

Re: View formatting issue

Anonymous — Fri, 18 Aug 2017 08:31:23 GMT

@jaread83 wrote:

I have fixed this and will be live tomorrow morning.

This may be 'fixed' but if I'm honest some of the posts look ugly due to positioning of the breaks. Can't have everything I guess.

Re: View formatting issue

jaread83 — Fri, 18 Aug 2017 08:33:42 GMT

Changes went live about 20 minutes ago. The word break is something I would have liked to avoid but I guess sometimes I just need to bite the bullet and realise that some users input bad data like this which requires the word-break CSS to stop it messing with the layout of a page.