Item2433: Foswiki Skin should auto-scroll verbatim blocks instead of overlaying them with the right bar.

Priority:	CurrentState:	AppliesTo:	Component:	WaitingFor:
Normal	Closed	Extension	FoswikiSiteSkin

Verbatim blocks common in Tasks web are overlayed on the right by the Right Bar.

Verbatim blocks should auto-scroll and be bounded by the right bar rather than be hidden by it.

For example of the error, see Tasks.Item2432

CSS path for the verbatim block is:

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternMain > div #patternMainContents > div .patternContent > div .foswikiTopic > pre

---

Comparison of the CSS Paths on this page:

Outer topic box (extends under side bar)

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternMain > div #patternMainContents > div .patternContent > div .foswikiTopic

Paragraph inside the topic box (bounded at side bar)

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternMain > div #patternMainContents > div .patternContent > div .foswikiTopic > p

Verbatim block inside topic box (extends under side bar)

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternMain > div #patternMainContents > div .patternContent > div .foswikiTopic > pre

Form box (bounded to side bar)

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternMain > div #patternMainContents > div .patternContent > div .foswikiForm

Side Bar

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternSideBar

Horizontal Rule (bounded to side bar)

html > body .patternViewPage > div #patternScreen > div #patternPageShadow > div #patternPage > div #patternWrapper > div #patternOuter > div #patternFloatWrap > div #patternMain > div #patternMainContents > div .patternContent > div .foswikiTopic > hr

---

#patternMain {
   float:left;
   overflow:auto;
}

Instead of our overflow:hidden

-- OlivierRaginel - 09 Feb 2010

---

That fix adds the scrollbar to the bottom of the page. Adding overflow:auto to the pre definition adds a scroll bar to the verbatim block only when needed.

style.css

pre
{
   border-style:solid;
   border-width:1px;
   height:1%;
   margin:1em 0;
   padding:1em;
   width:auto;
        overflow:auto;  <=== added
}

.. to ArthurClemens It appears that this fix works - can we get it checked in? Thanks

-- GeorgeClark

Sure, but, why wait for me?

-- ArthurClemens - 09 Feb 2010

patched and released.

-- WillNorris - 09 Feb 2010

This fix does not add horizontal scroll bars.

It makes the verbatim text word wrap making it no longer verbatim

And on my Android phone the result is that the window becomes so wide it is impossible to read.

The idea to fix this so you get a scroll bar below the verbatim block is the right one and it is annoying that you always have to view raw text to see error reports with long lines in verbatim.

But the actual fix does not work the way you wanted to. It wraps the text and this is not the idea of verbatim

-- KennethLavrsen - 10 Feb 2010

This seems to be browser dependent. At least in some cases it does what we want I believe.

• On Firefox 3.0 and 3.5 on Linux or Windows, it adds a horizontal scroll bar only when the text exceeds the body width. It does not wrap.
• On Konqueor on Linux KDE, it adds a scroll bar only when the text exceeds the body.
• Windows IE6 - it appears to do nothing. Text extends under the right bar as previously.
• Windows IE7 - Adds both horizontal and vertical scroll bar, and does not wrap
• Windows IE8 - adds a horizontal scroll bar for the verbatim block, text does not wrap.
• Android 2.1 and 2.01 SDK emulator - does not generate a horizontal scroll, but does render the verbatim block correctly. On the emulator double-click zooms in and the whole page scrolls left/right so that the entire verbatim block is visible.

-- GeorgeClark - 10 Feb 2010

False alarm.

Right after I saw this fix implemented I looked at Item8482 on my Android phone. It displays the topic as a 100 km wide topic which is impossible to zoom in.

And my desktop machine showed word wrapping in both IE and FF.

And I assumed this was the result of the change.

But the darn report is not using verbatim. The bloke pasted the error without putting it in verbatim.

I have added the verbatim and it works fine now.

Sorry about this. I should have checked.

-- KennethLavrsen - 11 Feb 2010