How to create a style for wide code

[skwpt]

I'm sure I can create this style fairly easily, if only I knew what to look up for guidance in the Flare guides and/or this forum.

Some of my <pre> examples are really wide. Although I added an element to make the content wrap, I would rather add a horizontal scroll bar for the really long output, such as XML payload. For example, if I were to create a scroll selector, would I put it under pre?

Here's my current pre

Code: Select all

pre
{
	font-size: 12pt;
	background-color: #edf0f1;
	white-space: pre-wrap;
}

[Psider]

Overflow sets the scroll bars, although I don't know if that is available in the Flare interface.

Does the following do what you want? It should add a horizontal bar if needed. It would also add a vertical bar if you have a fixed height set. If you only ever want to set horizontal, you could also set overflow-x.

pre
{
font-size: 12pt;
background-color: #edf0f1;
overflow: auto;
}

[skwpt]

Thank you, that was exactly what I needed.

[Psider]

Awesome!

One note, you only need to use one of overflow or overflow-x.

If you want to let the browser add horizontal and vertical scrollbars as needed, use overflow: auto;.

If you want to let the browser only add horizontal scrollbars as needed, use overflow-x: auto;.

[skwpt]

Thanks--I just fixed my CSS.

I was hoping the change would address the issue I noticed where there is no scroll bar when pre is used in a table field. Alas, no.

[Psider]

Hmm, this is a more complicated proposition.

The easiest way would probably be to define a fixed pixel size on the pre tag when it's inside a table. for example:

table pre {width: 600px;}

However, that does mean it won't resize as the browser window changes, or if you place pre tags inside tables with different numbers of columns/widths/etc.

I think you could probably also do that with classes with the same sorts of issues, for example:
pre.widecolumn {width: 800px;}
pre.narrowcolumn {width: 300px;}

Obviously test in a variety of scenarios to see if it will work for your situation.

[skwpt]

That does seem rather persnickety. I'll create a new pre selector for tables and experiment.

One good outcome (outside tables) is I no longed need the prewide style, which just made the font size smaller.

Thanks very much for the input.