XF 2.1 Tabs become 4 spaces after upgrade from 2 to 2.1?

[PJK]

Hello,
I recently upgraded from XF 2 to 2.1 and some of the posts where members post stats into Spoilers the spacing is now off, see this screenshot:

Dropbox - File Deleted - Simplify your life

www.dropbox.com

You can see it on the site live here.

Everything used to be in line, but now after the upgrade, it is misaligned. This is affecting hundreds of posts and I'd like to resolve it. What's the best way to do this?

I asked one member how he posted and he said this:

I calculate the stats in Excel and then copy them over to Notepad. Once the full reconstruction is completed, I copy/paste from Notepad to the forum. It's here that the TABs get replaced with 4 spaces.
If I paste directly from Excel, the formatting is different again. It seems that the spacing is forced to be full horizontal screen width and the background changes colour. (I've never done it this way)

Any ideas or suggestions are much appreciated to resolve this for the hundreds of posts this is affecting, and how to post these in the future to prevent issues.
Thanks.

 

[PJK]

Bump

 

[sbj]

Create a bug report.

 

[PJK]

Create a bug report.

Is this a bug with Xenforo? I'll get it reported, but what's the best way to fix it as soon as possible?
Thanks

 

[sbj]

I am not sure if this a bug. You can only find out if you report it.

If no 3rd party addon is involved, and it is not working in 2.1 as it was working in 2.0, then I would say it is a regression, so probably a bug.

I don't know how to fix it.

 

[Jake Bunce]

Bug or not, you can try to affect this with CSS by adding this to your extra.less template:

Admin CP -> Appearance -> Templates -> extra.less

.bbCodeBlock.bbCodeBlock--spoiler > .bbCodeBlock-content
{
	white-space: pre;
}

In my testing that preserves white space inside of the rendered spoiler tag.

You can experiment with different white space values:

white-space - CSS: Cascading Style Sheets | MDN

The white-space CSS property sets how white space inside an element is handled.

developer.mozilla.org

 

[Joe Kuhn]

Bug or not, you can try to affect this with CSS by adding this to your extra.less template:

Admin CP -> Appearance -> Templates -> extra.less

.bbCodeBlock.bbCodeBlock--spoiler > .bbCodeBlock-content
{
    white-space: pre;
}

In my testing that preserves white space inside of the rendered spoiler tag.

You can experiment with different white space values:

white-space - CSS: Cascading Style Sheets | MDN

The white-space CSS property sets how white space inside an element is handled.

developer.mozilla.org

Hi Jake. I just did a test myself and found that in my forum tab characters are not preserved, but rather are converted to 4 spaces - before the extra.less change you suggested - and after. Maybe that's 'preserving' in most people's minds because often 4 spaces are converted to 1.

What we're looking for instead is to leave the tab character a tab character. That may be asking too much as the conversion may be done in the browser and handed off to xf. I use Chrome and I get tab-to-4 spaces conversion before and after your suggested change. In Edge I found that the tabs were converted to 1 space before and after your change. Because of these results, I believe it's the browser that's replacing tabs with spaces which puts it out of our reach unless you know of a way to handle this in Chromium. (searched and found two cases, but it was resolved by converting tabs to a given number spaces, not preserving the tabs).

If we can't change pasting into browsers, perhaps we can do the conversion ourselves before we do the paste into a Spoiler. There's a way to do this in Excel: save to a .prn file. Here's what it does. Suppose you have the following data:

abcde[tab]123
ab[tab]456

Which looks like this in Excel:



And this in Notepad. It preserves tabs too:



The fix is to add variable number of spaces in that first column out to the beginning of the second column:

abcde   123
ab      456

Row 1 has 5 characters plus 3 spaces for a field of 8.
Row 2 has 2 characters plus 6 spaces for a field of 8.

Now the second column lines up. Your CODE tags preserve multiple spaces, so I believe we are very close to a solution going forward. Retro fixes are another matter requiring some programming...