CODEWITHSUNDEEP
htmlcssforms
Lukus
Lukus

Reputation: 1171

how to hide a vertical scroll bar when not needed

I have a textarea which is contained in a div as I have jquery hint and wanted to use opacity without changing the border. There is a visible vertical scroll bar how I only want this displayed when I am typing in the text field and it goes beyond the container. I have 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;
}

Upvotes: 109

Views: 122511

Answers (3)

DareDevil
DareDevil

Reputation: 5349

Add this class in .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 div. like here.

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

I have attached image , you see the out put of the above code enter image description here

Upvotes: 2

David Ly
David Ly

Reputation: 31586

overflow: auto (or overflow-y: auto) is the correct way to go.

The problem is that your text area is taller than your div. The div ends up cutting off the textbox, so even though it looks like it should start scrolling when the text is taller than 159px it won't start scrolling until the text is taller than 400px which is the height of the textbox.

Try this: http://jsfiddle.net/G9rfq/1/

I set overflow:auto on the text box, and made the textbox the same size as the div.

Also I don't believe it's valid to have a div inside a label, the browser will render it, but it might cause some funky stuff to happen. Also your div isn't closed.

Upvotes: 226

Boris Bachovski
Boris Bachovski

Reputation: 662

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

Upvotes: 3

Related Questions