Menu
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; } 
614
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML. CSS.
By default, a scroll bar will appear when the content is too long. Page authors can override this in a number of ways, for example: overflow-y: hidden => cut off content that is too long. overflow-y: scroll => always show a scroll bar even when it's not needed.
A quick fix is to add overflow: hidden to the CSS for your #footer . Note: A scrollbar will still appear if your #body content flows out of the the viewport. Show activity on this post. It will remove unnecessary scroll bars.
Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).
To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x: Note that overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page. Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference.
On this page, you can find some examples of making the scrollbar on the <div> element visible only when necessary by using the CSS overflow, overflow-y, and overflow-x properties. Use a <div> tag and place the content inside. Set the overflow property to “auto”. This value adds scrollbar when the content overflows.
To scroll only horizontally, we need to use the overflow-x property as we mentioned above and set the width and border properties. Also, we add a <p> element inside the <div> tag and then add style to it in the CSS section.
Use a <div> tag and place the content inside. Set the overflow property to “auto”. This value adds scrollbar when the content overflows. Set the width and height of the <div>. Let’s see the result of our code.
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.
134
overflow: auto; or overflow: hidden; should do it I think.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
