CODEWITHSUNDEEP
htmlcss
stack
stack

Reputation: 10218

How to keep scroll-bar hidden and show it when max-height is over?

I have a structure like this:

pre {
	word-warp: normal;
	display: block;
	padding: 5px 8px;
	width: auto;
	background-color: #eee;
	margin-bottom: 1em;
	max-height: 300px;
	line-height: 1.8;
	direction: ltr;
	overflow: scroll;
}
<pre>
<code>
In this case both X and Y scroll-bar(s) has to be hidden
</code>
</pre>

<hr>

<pre>
<code>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
</code>
</pre>

<hr>

<pre>
<code>
In this case just X-scroll-bar has to apears -------------------------------------------------------------------------------------------------------------------
</code>
</pre>

Actually I'm trying to create something exactly like stackoverflow-code-method-UI. How can I do that?

Upvotes: 2

Views: 126

Answers (1)

Benneb10
Benneb10

Reputation: 1489

You will need to set a max-width for the x scrollbar, but then changeing overflow:scroll to overflow:auto works exactly how you want.

pre {
    word-warp: normal;
    display: block;
    padding: 5px 8px;
    width: auto;
    background-color: #eee;
    margin-bottom: 1em;
    max-height: 300px;
    max-width:300px;
    line-height: 1.8;
    direction: ltr;
    overflow: auto;
}
<pre>
<code>
In this case both X and Y scroll-bar(s) has to be hidden
</code>
</pre>

<hr>

<pre>
<code>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
In this case just Y-scroll-bar has to appears
<br>
</code>
</pre>

<hr>

<pre>
<code>
In this case just X-scroll-bar has to apears -------------------------------------------------------------------------------------------------------------------
</code>
</pre>

Upvotes: 2

Related Questions