How to remove the vertical scrollbar SyntaxHighlighter block?

Question

I am newbie in Web-developing and possibly has a primary question. I have installed Joomla 2.5 CMS on my site, downloaded, installed and turned on the SyntaxHighlighter plugin. Then enabled the bash syntax and added nothing more the following code to my page

<pre class="brush: bash">$ uname -a
Linux laptop 2.6.32-41-generic #89-Ubuntu SMP Fri Apr 27 22:22:09 UTC 2012 i686 GNU/Linux
$</pre>

I got this result

vertical scrollbar in SyntaxHighlighter's block

It is OK but I have no idea why the highlighted vertical scrollbar appears. It scrolls only for a one or two pixels. So, what I have tried is to add a following code to the beginning of my template's CSS file

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody {
  overflow-y: hidden;
}

It does not helped me and I think the problem is deeper. Do you have any ideas about how to remove this vertical scrollbar?

Update If I use the !important declaration in template's CSS the scrollbar dissappear but the block with highlighted code behaves very strange on page scaling.

score 27 · Answer 1 · edited Nov 16 '12 at 07:08

27

You can add the following style to remove the vertical scroll bar and add horizontal one only when needed:

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

edited Nov 16 '12 at 07:08

Andrew Barber

39,603
20
94
123

answered Nov 08 '12 at 19:21

Vasil Trifonov

1,857
16
21

If you use a seperate CSS file, you first have to remove all "!important" parts for all *overflow* properties in `scCore.cs` to get this answer to work – nixda Feb 09 '15 at 22:47

score 0 · Answer 2 · answered Aug 25 '12 at 19:43

0

I looked at the example and found that there is a vertical scroll in that as well. When I inspected "syntaxhighlighter javascript" itself had an overflow. Check if you have included the code after or before you included the css

answered Aug 25 '12 at 19:43

nandu

779
4
18

John Yin · Answer 3 · 2014-02-01T08:39:31.110

syntaxhighlighter has overflow: auto as default style (see following css snippet in shCoreDefault.css). That's why we have to set overflow-y:hidden !important when we don't like vertical scrollbar. But we don't need set overflow-x: auto anymore. It's already there.

.syntaxhighlighter {
    font-size: 1em !important;
    margin: 1em 0 !important;
    overflow: auto !important;
    position: relative !important;
    width: 100% !important;
}

You can see syntaxhighlighter has already used '!important', that's why, you would find different browsers has different result. On my experience, in Firefox, I got the intended result: vertical scrollbar being hidden. But in Chrome, scrollbar is still over there.

In order have a higher priority of my defined class, I prefix some other scope selector, like the container's id or class.

ContainerId .syntaxhighlighter {
    overflow-y: hidden !important;
}

score 0 · Answer 4 · answered Aug 13 '15 at 14:24

To remove your vertical scrollbar for SyntaxHighlighter in your website you can use the below code snippet in your <head>...</head> section of your page.

<style type="text/css">
 .syntaxhighlighter table td.code .container {
  position: relative !important;
  padding-bottom: 5px !important;
}
</style>

Hope this code snippet helps you! :)

score 0 · Answer 5 · answered Oct 24 '15 at 19:45

Trying to remove a horizontal scroll bar, this was what finally worked for me, taking inspiration from John Yin's post above. No sub-set of the below worked in-and-of itself.

/* .post class is on high-level div */
.post .syntaxhighlighter {
    position: relative !important;
    width: 100% !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

How to remove the vertical scrollbar SyntaxHighlighter block?

5 Answers5

Linked