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 modify CSS or JS file from “materialize:materialize” package in Meteor

    Howto include application css into mailer views in Rails 3.1

    Page not displaying, error not shown in console?

    How to have a bold header text?

    How to size this text with css?

    Can't figure out how to fix CSS for 3rd party library element

    How to get rid of !important tags?

    HOW DO I MOVE THIS DIV UP TO BE ALLIGNED WITH THE FORM BOX [closed]

    How to prevent default title behavior with CSS or JavaScript [duplicate]

    How do I keep parentheses of SASS / SCSS mixin?

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    How to Slide or Move this Set of Divs

    how to put an image upon a image in a li which (on hover) changes its z-index

    how to show ng-repeat horizontal?

    How to get the “true” computed CSS width in Chrome / IE

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    AngularJS how to put both ng-class and CSS class

    How to use different CSS in the same page

    How to apply effect just to background image and not text

    How to debug Font-Awesome icons?

    How can I style this php with divs?

    How do I add a link to my CSS background?

    Using CSS, how do I move a DIV to the left of the centre position?

    Bootstrap: How to apply certain CSS rules, when on different devices [duplicate]

    How to achieve straight shadow with CSS?

    Rails: How to control CSS, Javascript files

    How to reset a css animation class using jquery?

    css/jquery - how to hide last row of floated elements if not even

    How Do you combine CSS code to an HTML code? I want to Combine them? [closed]

    How do I make a placeholder for a 'select' box?