News:

Wondering if this will always be free?  See why free is better.

Main Menu

Horizontal Scroll Bar for Code Block

Started by Lithriel, May 16, 2009, 01:02:44 PM

Previous topic - Next topic

Lithriel

My forum is going to cater to artists.  The only reason why we will use the code tag is to preserve BBC code for questionnaires and such.  So is there a way to get rid the annoying horizontal scroll bar every time I use the code tag?

http://silindor.com/images/layouts/codeshot.gif

I've tried all the CSS I know to get rid of it and nothing seems to be working.  It's putting a horizontal scroll bar in  when I want it to wrap the words.  Even when I put overflow:hidden in, it showed the scrollbars.  Current CSS:

.code
{

background-color: #e8e7d8;
border: 1px solid #c5c4b7;
font-family: "courier new", "times new roman", monospace;
line-height: 1.3em;
/* Put a nice border around it. */
   margin: 1px auto 1px auto;
   padding: 1px;
   
}


DavidCT

Edit the style.css, find "code" (as you did), edit it (it specifially says DON'T WRAP - change it, though you probably shouldn't).  I didn't try it, so let me know if it works :D


/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


white-space is the switch.  Problem is some settings don't work in older browsers...

From developer.mozilla.org/en/CSS/white-space

normal
    All sequences of whitespace and line breaks will be collapsed. Line breaks are add to wrap the content.
pre
    All white spaces in the source will be preserved, lines are only broken at newline characters in the source.
nowrap
    All sequences of whitespace and line breaks will be collapsed, also line breaks (text wrapping) are suppressed within content.
pre-wrap New in Firefox 3
    All white spaces in the source will be preserved, lines are broken at newline characters and as needed to wrap the content. For backward compatibility with Firefox 2, you may wish to also include -moz-pre-wrap, which does the same thing in older versions of Firefox but is ignored in Firefox 3.5 and later.
pre-line New in Firefox 3.5
    All sequences of whitespace will be collapsed, lines are broken at newline characters and also as needed to wrap the content.


You could also edit the PHP if you can figure out where and break the lines up using php.net/wordwrap, though I have no idea if it'll work.

Personally, I'd leave it alone and stop obsessing about it.  It's the way it is for a reason.

Lithriel

Actually I tried that before I even posted this message, I am using the current Firefox version, and no, it does not work.

Any other ideas?

FireDitto

Really old topic, but anyway -- I used this;

white-space: pre-wrap;
overflow: auto;

Second Pass Weyr<br />An AU Pernse RPG<br /><br />SMF 2.0.6 with SP 2.3.5

MrPhil

If you want to show BBCode tags in normal text or quotes, use the "nobbc" tag:

This is [b]bold[/b] text.

(tags are [ nobbc ] and [ /nobbc ]; remove the extra spaces).

It is an abuse of the [code] tag to start it doing word wrap and stuff.

FireDitto

Quote from: MrPhil on December 19, 2012, 11:06:40 AM
It is an abuse of the [code] tag to start it doing word wrap and stuff.

I have no idea what that means, lol
Second Pass Weyr<br />An AU Pernse RPG<br /><br />SMF 2.0.6 with SP 2.3.5

MrPhil

It means that "code" should be used for displaying code, which means that it should scroll to show long lines rather than wrapping them around. Code is hard to read when wrapped around. The original objective was to display BBCodes in posts, and using the "nobbc" tag is the best way to do that, rather than messing up the code tag.

FireDitto

Second Pass Weyr<br />An AU Pernse RPG<br /><br />SMF 2.0.6 with SP 2.3.5

Advertisement: