code box with scroll bars?

[MediumRare]

Would it be possible to implement a code box with scroll bars (like they have at CDFreaks, e.g. this post)?

Some posts with Nero error logs or InfoTool reports become so long that the point of the post gets lost in the details.

G

[dodecahedron]

EXCELLENT idea!

[socheat]

You mean like this?

Code: Select all

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo, leo nec consequat rutrum, ligula justo convallis lectus, pellentesque fermentum sapien arcu non arcu. Etiam ut ante vel nibh mattis congue. Vestibulum pharetra nunc eget nisl. Quisque eu mi. Ut scelerisque. Aenean massa. Sed ante arcu, semper quis, elementum ut, lobortis nec, leo. Suspendisse metus. Cras id ipsum. Duis bibendum viverra risus. Vestibulum at lacus. Etiam hendrerit enim sodales velit. Duis libero. Nulla vel lacus. Nullam ac diam in magna consectetuer fringilla. Cras quis pede a lectus interdum semper.

Etiam adipiscing, enim sit amet interdum imperdiet, massa arcu mattis lorem, vel bibendum tortor elit at pede. Ut sodales. Suspendisse ornare auctor tortor. Praesent vehicula tempor diam. Sed viverra, odio a eleifend dignissim, mauris justo imperdiet justo, ac viverra est lectus eu elit. Curabitur eu lacus. Integer imperdiet ante vel odio. Nam vel risus. Proin dolor. Donec at quam a ante lacinia ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nibh purus, dictum et, sodales id, tincidunt sed, justo. Sed sit amet sem. Pellentesque risus mi, tincidunt non, blandit nec, tempor id, sapien. Curabitur condimentum cursus risus. Vivamus lacinia condimentum mauris.

Phasellus condimentum. Pellentesque pulvinar, magna id auctor porta, quam leo tincidunt quam, pharetra aliquam quam diam ut orci. Etiam ultrices est et ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tempor, justo et hendrerit tempor, arcu purus viverra tortor, ac tincidunt urna arcu vel tellus. Suspendisse elit. Phasellus adipiscing lacus at diam accumsan fringilla. Aenean quis nibh. Vestibulum molestie dictum urna. Donec eleifend semper nibh. Sed non magna sed ligula consequat ornare. Nam turpis libero, dapibus et, cursus a, vulputate ac, dolor. Cras euismod, pede nec varius tempus, purus felis lobortis mauris, in ultricies eros eros vel dolor. Proin nulla orci, imperdiet vitae, lacinia ac, elementum dignissim, tellus. Sed hendrerit.

[socheat]

Just so no one is confused, no this wasn't always an option. I just added the code that implements this a few minutes ago.

[dodecahedron]

very nice!

[MediumRare]

Yes, that's what I mean. Thank you! Now we have to encourage the log-posters to use the option!

I just had a look at some of the existing code blocks. The resulting boxes seem to have a minimum size that's a bit too long. I use the code option to generate tables in my c't summaries (I guess scrolling them is OK when they get longish) but some of the shorter ones have a lot of blank padding .

Also, there is some ugly line-wrapping in some of these tables- the width should be greater (like the previous size of the code block) or a horizontal scroll bar is needed as well.

G

[socheat]

Sure, I can make them wider and shorter, and add horizontal scrolls. Only thing is that these numbers are hardcoded. You won't be able to change them on a case by case basis, and it will affect all previous code blocks. I hesitated to make it wider because I run at 1600x1200 on a laptop, so i wasn't able to resize down to our lowest supported res to make sure it still fit. Will try it out later today.

FYI, width is set to 500px.

[dodecahedron]

i keep my browser window just the minimal width so that it doesn't have a horizontal scrollbar when viewing CDRLabs forums. and there's still plenty enough space to make the scrollbox wider IMO.

isn't it possible to have the scrollbars 'appear' only if the code box is longer than a certain number of lines? and up to that number it would be like before - the box is only as long as needed.

[socheat]

isn't it possible to have the scrollbars 'appear' only if the code box is longer than a certain number of lines? and up to that number it would be like before - the box is only as long as needed.

The code box is created with CSS trickery. I changed it from:

Code: Select all

width: 500px;
height: 300px;

to

Code: Select all

max-width: 550px;
max-height: 225px;

That should do the trick, but remember since this is CSS and not IFRAME's, results will vary depending on browser support. (Though IFRAME's are hit and miss too, I hear)

[MediumRare]

Thanks- I think that works well.

The corresponding code blocks in my c't posts are OK now. The line-wrapping is gone and small code blocks stay like they are. Incidentally, I looked at the HTML at CDFreaks and they apparently use a maximum width of 640 pixels.

However I also see what you mean about varying results. I just had a look at this post with Opera 7.54 (which uses a larger font) and there are no horizontal scroll bars in either code-block (which means line wrapping) in distinction to Firefox, which does use them.

Anyway, now we have to encourage people to use this for their error logs!

G

[dodecahedron]

BTW why use a max-width? why limit the maximum width of the scrollbox ?
not that i mind, it looks fine now. just strange when i maximize the window the scrollbox remians relatively small compared to the maxed browser window.

Anyway, now we have to encourage people to use this for their error logs!

yeah, you know what that means...more work for mods!

[MediumRare]

However I also see what you mean about varying results.

I can see why webmasters go grey early. I'm at work now and had a look with IE6. It seems to ignore the CSS-info (at least with the restrictions I've imposed on it) and shows the code-blocks same as before.

yeah, you know what that means...more work for mods!

:D gives you something to do!

G

[socheat]

BTW why use a max-width? why limit the maximum width of the scrollbox ?
not that i mind, it looks fine now. just strange when i maximize the window the scrollbox remians relatively small compared to the maxed browser window.

Alright, alright! I changed it to min-width. I'm this close to just giving you access to the templates files and let you mess with the values.

[MediumRare]

I can see why webmasters go grey early.

Now FireFox 1.5.0.1 (maybe earlier ?) isn't showing horizontal scoll bars (neither does IE6 or Opera 8.51). From looking at the source code, I don't think anything has changed in the formating- so it seems to be the browser update that killed them.

Could you have a look if there's a possibility to resurrect them? Some of my c't summary tables are messed up as a result.

G

[socheat]

Could you post a screenshot (or email it to me) of what I should be seeing? It looks fine to me, but I'm using 1.0.7 still.

Socheat

[MediumRare]

I'll post one tonight. I don't have FireFox installed at work- just IE6 and Opera 8.51. Thanks for looking into it.

G

[MediumRare]

OK- attached is what I'm seeing with FireFox 1.5.0.1. This is near the start of this post. The lines are ca. 8 characters too long for the box width- e.g. the 0.19 under AxialN is wrapped.

I upgraded to FireFox 1.5 a few weeks ago and hadn't looked at these posts since. Maybe FireFox is behaving more like the standard demands now? Opera (various versions up to 8.51) doesn't show scrollbars either.

G