{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我只想做你的唯一 的问题《How to remove the vertical scrollbar SyntaxHighlig》','https://www.manongdao.com/q-760706.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
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.
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.
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 csssyntaxhighlighter has
overflow: autoas default style (see following css snippet in shCoreDefault.css). That's why we have to setoverflow-y:hidden !importantwhen we don't like vertical scrollbar. But we don't need setoverflow-x: autoanymore. It's already there.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.
You can add the following style to remove the vertical scroll bar and add horizontal one only when needed:
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.Hope this code snippet helps you! :)