How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)


Tags: css,google-chrome,textarea

Problem :

How can I prevent the textarea from stretching beyond its parent DIV element?

I have this textarea inside a table which is inside a DIV and it seems that it causes the entire table to stretch out of its bounds.

You can see an example of the same situation even in a more simple case, just putting a text area inside a div (like what is used here in www.stackoverflow.com)

You can see from the images below that the textarea can stretch beyond the size of its parent? How do I prevent this?

I'm kind of new to CSS so I don't really know what CSS attributes should I be using. I tried several like display, and overflow. But they don't seem to do the trick. Anything else I might have missed?

the div section

the text area

UPDATE: HTML

CSS

textarea {
    max-width: 50%;
}
#container {
    width: 80%;
    border: 1px solid red;
}    
#cont2{
    width: 60%;
    border: 1px solid blue;
} ​

If you put this code inside the http://jsfiddle.net, you will see that they act differently. Although the textarea is limited to the percentage declared in its css style, it is still possible to get it to cause its parent table to be as large as it wants to be, and then you can see that it spills over its parent border. Any thoughts on how to fix this? ​



Solution :

To disable resizing completely:

textarea {
    resize: none;
}

Or you can limit size:

textarea {
    max-width: 100px; 
    max-height: 100px;
}

To limit size to parents width and/or height:

textarea {
    max-width: 100%; 
    max-height: 100%;
}

    CSS Howto..

    How to make an image behave like in Primefaces?

    How to position a label using css relative to an absolute positioned input box

    How does CSS handle specificity tie?

    How can I resize to fit html elements horizontally using CSS?

    CSS: How to position two elements on top of each other, without specifying a height?

    How to set a background-color to element which has the same id with anchor of url?

    How to use jQuery to set min-height the same as window

    how to write a css that only can be visible on desktop in bootstrap

    With CSS, how do you unhighlight a link after clicking a different link?

    How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

    How do I make effect like this on image hover?

    How to fit a big picture in a smaller space

    How can I set all columns to be the same height? [duplicate]

    CSS, how to size an img back to its width attribute

    HTML - How do I insert a tag into each line of a
     block without hard coding?

    How to center two columns using CSS?

    How to add non-literal into a variable like jQuery?

    How do I make a horizontal sitemap using UL?

    How do you add 'box-sizing: border-box' to Normalize.css file?

    CSS how can i turn the scrolling off during the animation?

    How to keep css background image blurred inside a container?

    How to use “currentColor” CSS 3 keyword in LESS?

    How to toggle between display:none and display:block

    How to set css via jquery for preventing some action

    How to show hidden div when javascript is disabled?

    How to hide element label by element id in CSS?

    How to create a DIV with vertical scrollable contents and fixed footer which is always visible?

    css button with arrow… how to move arrow

    How to make a gallery

    How to create a horizontal calendar with nested lists?