Wordpress Syntaxhighlighter -- horizontal scroll bar visibility

Question

I'm using the following code along with the wp-syntaxhighlighter plugin with the optional language pack (e.g., lisp). I would like the horizontal scroll bar to be visible at all times, instead of only at the end of the code block. How, please, can this be accomplished?

<div style="overflow:auto;max-height:400px;width:600px">
  <pre class="brush: lisp; gutter: true">
  CODE GOES HERE
  </pre>
</div>

_{(source: lawlist.com)}

EDIT: Here is a screenshot of the following code: <div style="overflow:auto;max-height:400px;width:600px;overflow-x:scroll;">. Adding overflow-x:scroll; causes a second horizontal scrollbar to appear, but without the blue slider.

_{(source: lawlist.com)}

@ilias -- thanks for the suggestion. I just tried adding `overflow-x:scroll;` (i.e., `
`) -- it created a second horizontal scroll bar without the blue a slider -- the original scroll bar is still present when the code block is at the end. I'll add a third screen shot of the result. — lawlist, Apr 08 '14 at 21:10
I see, can you try `style="max-height:400px;width:600px;overflow-x:scroll; overflow-y:scroll;"` instead? — ilias, Apr 08 '14 at 21:18
@ilias -- thanks, I just tried `style="max-height:400px;width:600px;overflow-x:scroll;overflow-y:scroll;"` and the result was the same as the above-screenshot. I.e., prior to the end of the code block, one horizontal bar (without a blue slider) is visible at the bottom, and at the end of the code block that same horizontal bar (without a blue slider) remains visible, and the horizontal bar (with the blue slider) is also visible. I'm thinking that perhaps this is a setting that has something to do with the plugin itself. — lawlist, Apr 08 '14 at 21:29
Well it seems to be indeed something plugin related you might get some ideas from [How to remove the vertical scrollbar SyntaxHighlighter block?](http://stackoverflow.com/questions/12125010/how-to-remove-the-vertical-scrollbar-syntaxhighlighter-block) or [here](http://www.webtrafficexchange.com/syntax-highlighter-usage-syntaxhighlighter-options) or in these [results](http://stackoverflow.com/search?q=syntax+highlighter+wordpress). I can't test it right now to help you more. — ilias, Apr 08 '14 at 21:36
overflow: auto; will automatically add scroll bars if the content within is greater than the defined height or width.thats why 2 scrollbar.so euther yse overflow:x or overflow:auto — Arjun Chaudhary, Apr 08 '14 at 21:53
Thank you to both @ilias and @Arjun Chaudhary -- I removed `
` and replaced it with a modification of code from a link provided by @ilias. A sample answer is posted below. The help provided by both of you put me on the right track -- greatly appreciated !!! :) — lawlist, Apr 08 '14 at 22:29

score 1 · Accepted Answer · edited Sep 14 '19 at 19:17

Based upon the helpful links provided by @ilias, and based upon the helpful comment by @Arjun Chaudhary, the following code resolves the issue:

<style type="text/css">
  .syntaxhighlighter {
    width: 500px;
    height: 500px;
    overflow-y: auto !important;
    overflow-x: auto !important;}
</style>

<pre class="brush: lisp">

INSERT-CODE-SNIPPET-HERE

</pre>

OR, modify shCore.css of syntaxhighlighter (aka wp-syntaxhighlighter):

.syntaxhighlighter {
  width: 500px;
  height: 500px;
  overflow-y: auto !important;
  overflow-x: auto !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  font-size: 1em !important;
}

_{(source: lawlist.com)}

Wordpress Syntaxhighlighter -- horizontal scroll bar visibility

1 Answers1