How can I set a Horizontal! scroll bar for my Github page under this bootstrap theme? [closed]


Tags: html,css,github,scrollbar

Problem :

here is my page

the code is

<pre class="Input" style="
font-size: 13px;
font-weight: bold;
margin-left: 66px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 5px;
padding: 8px;
overflow:scroll;
"><code>p =     Orthogonalize[engenvectors]ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</code></pre>

How ever I didn't add the auto word-wrap in my raw html file, and I wanna see the effect like that in StackExchange.

    Orthogonalize[engenvectors]ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

It seems that the theme's css override the setting in raw html file.

So how to solve the problem.

The raw effect of horizontal scroll bar is shown by the following picture. enter image description here

There is a problem, The bootstrap theme changed the horizontal scroll bar into a vertical scroll bar, the horizontal scroll bar doesn't take effect.

Seems the theme's "word-wrap" prevent the horizontal scroll take effect, I guess.



Solution :

In your CSS: (Might as well try it directly on the <code> tag and see what you get..

pre.input {
     white-space:pre;
     overflow-x:scroll;
     background-color:#EEE;
     vertical-align:baseline;
     font-family:Monospace;
}
code {
     white-space:pre;
     overflow-x:scroll;
     overflow-y: none; /* add this line */
     background-color:#EEE;
     vertical-align:baseline;
     font-family:Monospace;
}

    CSS Howto..

    new google images how do they float correctly

    How To Move A DIV Element A Little Towards The Top

    How to pass array from method to property using PHP

    how to do responsive with css grid and reversed order of elements

    How does css inheritance work exactly?

    How to inject css into a document via ajax?

    How to display background-image on entire site

    How to place text at the bottom when there's predefined height!

    How to center absolute div (text) above relative div (image) responsively?

    How to horizontally center absolute text?

    How to reduce size of a text with police roboto on a small scren

    How to make page border in print CSS for every single page

    How to put text on placeholder image

    How to make text disappear when HTML5 Video has finished loading?

    how to trigger a stored property with css color change?

    How to properly use CSS borders to visualize a value chain?

    How can I make a pointy arrow with a div in CSS

    How to styles labels only within fieldsets using CSS?

    .show() not working on page load

    How to get the navigation element to have horizontal lines after each nav element in css

    How do I make my banner image stretch to fit the width of the page if the page width exceeds image width?

    how to change css of the image link when clicked?

    How to “add details” to CSS (example Box shadow)

    How to color row on specific value in angular-ui-grid?

    How do i get the submenus to show with a small window size?

    how to make button in ionic + css

    How to change and maintain multiple color themes at runtime with css?

    How to fix content leaks out of an element despite use of “overflow:hidden”?

    css responsive design: how to improve my page ?

    How to change the background-color of jumbrotron?