White "Shadows" in Code Tags?

The scroll bars were not working before, so nothing will be different :wink:

We can't have it both ways. If they don't work, we must disable them. If they are disabled, then obviously they won't work, LOL

Feel free to post a screenshot with a description of any issues!

I take your point but, like many apps do, would active scroll bars just appear if the post was too wide for the screen or too long for the page? We are all familiar with seeing such functionality every day.

In fact, we see it on this site when, for whatever reason, some complete posts are wider than screen. Scroll bars seem to simply appear in that situation.

The current code for the code tags looks like this:

<style>
pre {
   overflow:hidden;
   margin:2px;
   padding:15px;
   border:1.2px solid;
   margin-right:10px;

}
</style>
<br />
<br />
<div class="smallfont" style="margin-bottom:2px;">$vbphrase:</div>

<pre class="alt2">$code</pre></div><br />

So, the action should be as for the CSS attribute:

overflow:hidden;

The overflow property has the following values:

Nothing has ever worked correctly on this because of the pre tag used for code tags; however, if you want to try, we can try another value for the overflow attribute, for example "auto".

But honestly, we have tried all before and they did not work.

Which CSS overflow attribute do you want to try now?

Want to try auto again?

Update:

Now trying this code:

<style>
pre {
   overflow:auto;
   margin:2px;
   padding:15px;
   border:1.2px solid;
   margin-right:10px;

}
</style>
<br />
<br />
<div class="smallfont" style="margin-bottom:2px;">$vbphrase:</div>

<pre class="alt2">$code</pre></div><br />

Testing:

01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789

Does not work:

So changing back.

The problem is that scrollbars do not work with the HTML pre tag.

If you have better HTML/CSS code for code tags, we can try it.

Thanks.

1 Like

It is interesting to note that the mobile code does not have this issue and we can scroll without scrollbars with finger gestures on mobile.

OK... after digging around, I think I'll try to change our code tags to use:

SyntaxHighlighter

See also:

SyntaxHighlighter 3.0.83

OK. I think I will install and test:

SyntaxHighlighter v4

... and see if I can completely redo / replace our current code tag code.

Thanks.

Update:

I added a new kit and code for the code tags. See this thread:

New Code Tags (Syntax Highlighting)