Wednesday, April 29, 2009

Displaying vertical scroll bar dynamically in HTML elements

Vertical scroll bar in HTML controls/elements/tags such as TEXTAREA and SELECT will be useful if the element has more content/items.

But always showing Vertical scroll bar will be occupying some space in the page unnecessarily.

So the best way is, showing the Vertical scroll bar dynamically only when the content exceeds a limit.

It can be achieved by specifying "overflow" as auto in the style.


<textarea style="overflow:auto"> some content</textarea>

Similarly we can specify overflow as hidden if we don't want to show the scrollbar.

It is working fine for Textarea in both IE and FireFox.

But it is not working for Select in FireFox.

Select tag in FireFox is showing scroll bar even when we specify overflow as hidden.
And also, we have noticed that it happens only when the number of items/options in the Select exceeds 20.

By searching the internet we came to know that there is no way to make it work properly other than some ineffective ways such as hiding the scroll bar using some div tags.
More Articles...

No comments:

Search This Blog