Forum posts display problems (and fixes)

[Palad1]

Hello,

I am currently working on a dell craptop with a small screen estate, and I noticed a display glitch in the posts using FireFox (works semi_fine in IE 6).

Some posts (I think it involves replies) don't display correctly, the vertical alignment of the poster ID is not the same for all posts, especially when there is a very long quote in a post, which makes the replies quite hard to read (and create a lovely horizontal scrollbar).

There are two ways to fix this glitch :

• Client side: Install the GreaseMonkey extension as well as the phpBB NoStretch user script (www.userscripts.org) and map it to */showthread.php*
• Server Side: update the template / CSS . Here's what is causing the problem:
  spans which have a "postbody" class and whose parent's class is not "quote" should be placed in a

  <div style="overflow:auto;width=100%;class="postbody"><span...></span></div>

  
  I guess the thing is the span does not trigger a reflow of the layout., whereas the div does.
  

Well, here's the client side code that takes care of the fix

Hope that helps,
Palad1

var posts = document.evaluate("//span[@class='postbody']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var thisPost;
for (var i = 0; i < posts.snapshotLength; i++) {
  thisPost = posts.snapshotItem(i);
  if (thisPost.parentNode.className != 'quote'){
    newPost = document.createElement('div');
    newPost.style.overflow = 'auto';
    newPost.style.width = '100%';
    newPost.innerHTML = thisPost.innerHTML;
    newPost.className = 'postbody';
    thisPost.parentNode.insertBefore(newPost, thisPost);
    thisPost.parentNode.removeChild(thisPost);
  }
}

 

[iBlue]

i've seen that happen a couple times. i refreshed the page and it went away, but that's good that you mention a specific solution, which is further than most people go when suggesting something.

 

[Lau]

Amusingly, that the large quote in the original post was wide enough to make a horizontal scrollbar on my browser.

Thanks for sharing the solution though.

 

[WildCowboy]

That's because it wasn't a quote, which would have wrapped the text. The "code" tags don't wrap so as to keep things formatted as code should be.

 

[Palad1]

That's because it wasn't a quote, which would have wrapped the text. The "code" tags don't wrap so as to keep things formatted as code should be.

The 'code' div seems to have horizontal scrollbars here... but the left column holding the poster id still takes too much space.

(testing on Mac with ff 1.5 right now) but the glitch remains

The greasemonkey script fixes it though.
All praise the monkey!