How to hide the vertical scroll bar when not required

Question

I have textarea that is contained in a div, since I have a jquery hint and you want to use opacity without changing the border. There is a visible vertical scrollbar as soon as I want it to appear when I print a text box and it goes outside the container. I tried overflow: auto; but does not work.

TextField:

<label> <div id="name"> <textarea name="message" type="text" id="message" title="Enter Message Here" rows=9 cols=60 maxlength="2000"></textarea> </div> </label> 

Styles:

 #name { border: 1px solid #c810ca; width: 270px; height:159px; overflow: hidden; position: relative; } #message { height: 400px; width: 235px; overflow: hidden; position: absolute; } 

Answer 1

overflow: auto (or overflow-y: auto ) is the right way.

The problem is that your text area is above your div. As a result, the div turns off the text field, so even if it seems like it should start scrolling when the text is above 159px , it will not start scrolling until the text is above 400px , which is the height of the text field.

Try the following: http://jsfiddle.net/G9rfq/1/

I set overflow: auto to the text box and made the text box the same size as the div.

In addition, I do not believe that the div inside the label matters, the browser will display it, but this can lead to the appearance of any funky things. Also your div not closed.

Answer 2

overflow: auto; or overflow: hidden; should do it, I think.

Answer 3

Add this class to the .css class

 .scrol { font: bold 14px Arial; border:1px solid black; width:100% ; color:#616D7E; height:20px; overflow:scroll; overflow-y:scroll; overflow-x:hidden; } 

and use the class in the div. like here.

 <div> <p class = "scrol" id = "title">-</p></div> 

I have attached an image, you see that outside this code above