CODEWITHSUNDEEP
javascripthtml
William Ross
William Ross

Reputation: 3910

Html vertical scroll bar is not enabled?

I have a vertical scroll bar which shows up as not being clickable. The vertical scroll-bar is visible but the bar seems disabled.

For the text area I have:

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow-y:scroll; overflow-x:hidden; vertical-align:middle;"></textarea>

EDIT: I found that another div in my script has a "position:absolute" attached to it. When this is changed to relative the y-scroll bar is clickable. Wondering why this position:absolute affects the scroll bar?

Is there a way to explicitly enable the vertical scroll bar?

Upvotes: 1

Views: 3488

Answers (2)

Chukwu Remijius
Chukwu Remijius

Reputation: 323

Css scroll bar on element is overflow: auto;

This is your code:

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow-y:scroll; overflow-x:hidden; vertical-align:middle;"></textarea>

Use this to make element scroll automatically when content overflow:

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow:auto; vertical-align:middle;"></textarea>

This is more efficient way than calling overflow two time in different sides of the element layer.

Upvotes: 1

Bagzli
Bagzli

Reputation: 6579

The vertical bar shows because you have overflow-y: scroll; This property specifically makes the bar always visible. The reason why it looks disabled is that there is not enough content in the text area to make it scrollable.

If you add content that is more than the height of the text box, the bar will be scrollable.

Here is your code with a lot of text in it, you will see it can be scrolled. Remove all that text and then it becomes disabled.

https://jsfiddle.net/741232t2/1/

If you want the bar to show only when you can scroll, the you want to do overflow-y: auto;

This next fiddle has overflow-y: auto; and if you remove all the text there you will see that the bar also disappears.

https://jsfiddle.net/741232t2/2/

I would though suggest that you use a single overflow call instead of 2 such as this: overflow: auto;. It will do the job that you want.

<textarea id="mytextarea" rows="10" style="white-space: pre-wrap; width:99%; overflow:auto; vertical-align:middle;">/textarea>

https://jsfiddle.net/741232t2/3/

Upvotes: 4

Related Questions