Prevent textarea from scaling fieldset

Question

I have a simple form with a textarea input inside of it. When I scale the textarea it pushed the fieldset boundary with it. How can I untie the textarea scale from the fieldset scale. I want this only to apply to the horizontal scale.

enter image description here

HTML

<form>
    <fieldset>
        <legend>Description</legend>
        <label>Name</label>
        <input type="text">
        <p></p>
        <label>Describe the object</label>
        <textarea></textarea>
    </fieldset>
</form>

CSS

textarea {
  display: block;
  max-height: 200px;
  max-width: 350px;
}

jsfiddle

I see you edited your question. If you want to set the limitation only on the horizontal scale, just use the div part of my answer, with the ".DontGrowWidth" css class. It will enable you to change the textarea size without changing the fieldset size — User, Feb 02 '15 at 09:20

score 2 · Answer 1 · answered Feb 01 '15 at 15:30

Add max-height to the fieldset, it will take care of the height. It won't work with the width so you will have to work around it and wrap your text area wit a div and set it's max-witdh to the value of your fieldset.

<h1>Form Demo</h1>
  <p>
  <form>
    <fieldset>
      <legend>User Information</legend>
      <label>Sex</label>
      <input type="radio"
             name="sex"
             id="male"
             value="male"/>
      <label for="male">Male</label>
      <input type="radio"
             name="sex"
             id="female"
             value="female"/>
      <label for="female">Female</label>
    </fieldset>

    <fieldset class="DontGrow">
      <legend>Description</legend>
      <label>Name</label>
      <input type="text">
      <p></p>
      <label>Describe the object</label>
      <div class="DontGrowWidth">
          <textarea></textarea>
      <div>
    </fieldset>
  </form>

css:

body {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  font-family: sans-serif;
}
label:nth-child(2) {
  font-weight:bold;
}

.DontGrow{
    height:160px;
    max-height:160px;

}

.DontGrowWidth{
      max-width: 300px;
}

}
fieldset {
  margin-top: 30px;
}
input {
  display: block;
}

textarea {
  display: block;
  max-height: 200px;
  max-width: 400px;
}

input[type=radio] {
  display: inline
}

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

This question is keep on repeating

textarea {
    resize: none;
}

How to disable resizable property of textarea?

Learn to explore and search first before asking question. Google it!

edited May 23 '17 at 11:56

Community

1
1

answered Feb 01 '15 at 18:51

mimicode

64
4

Well genius, If you had read the question you would know that my goal is not to disable the resize option. – Vader Feb 01 '15 at 18:57
Duuh? As I can see on your demo image or whatever you want to get rid of that grabber thing that resize the scale of your textarea that pushes the boundary of the div of you wrapper. Am i correct ? – mimicode Feb 01 '15 at 19:00
no.... I want to keep the text area scaling but get rid of the outline scaling with it. – Vader Feb 01 '15 at 19:02

Vader · Answer 3 · 2015-02-01T19:12:06.590

0

I solved my own problem by wrapping the textarea in a div container and restraining this container in size.

HTML

  <div class="textareas">
    <textarea></textarea>
  </div>

CSS

.textareas {
  width: 300px;
}

enter image description here

edited Feb 01 '15 at 19:12

answered Feb 01 '15 at 15:18

Vader

6,335
8
31
43

Prevent textarea from scaling fieldset

3 Answers3