width:100% stretches to the border - textarea

Question

I have width:100% for a textarea, but my textarea stretches all the way to the page's border by default. Is there anyway to fix this?

I'm trying to make this responsive so that the textarea's maximum width is cols="100", but it will also shrink if needed.

textarea {
    -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width: 100%;
 resize: none;
    }

<textarea cols="100" rows="10" name="savetext" id="savetext"></textarea>

Can you please elaborate by adding the relevant code you currently have? — rink.attendant.6, Jan 03 '15 at 08:13
you should add code what you tried or you will be down voted please be quick — sanoj lawrence, Jan 03 '15 at 08:14
It's probably to do with your HTML mark up. You embedded the textarea in your body, instead of a wrapper. — Bram Vanroy, Jan 03 '15 at 08:15
width 100% of what? in absence of any fixed-width parent, it will use the body/viewport width. so, it is 100% of your body/viewport. — Abhitalks, Jan 03 '15 at 08:19
@abhitalks I would like the width to be 100 columns wide just like how I stated it in the HTML code. — user1561616512, Jan 03 '15 at 08:20
@abhitalks I did that before but it doesn't make the textarea responsive. — user1561616512, Jan 03 '15 at 08:24
@MustafaMJalal Setting the width to 100% will make it go to the edges of the page. I only want it to be 100 columns but responsive. — user1561616512, Jan 03 '15 at 08:29

score 0 · Answer 1 · answered Jan 03 '15 at 09:37

Try using width: 400px; (px) instead of % with that I would suggest use 'class' or 'id' in html element, instead of writing style globally for html element(s)

Example:

<style>
.textarea{
 width:300px;
 height: 150px;
}
</style>

<textarea rows="3" cols="50" class="textarea"></textarea>

score 0 · Answer 2 · answered Jan 03 '15 at 10:39

0

Use This css

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 61%;
    resize: none;
    }

answered Jan 03 '15 at 10:39

Ravi Sukhadia

443
6
16

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

You use rows/cols in case CSS is not supported; if you specify a width or height in your CSS, they override the value derived from rows/cols.

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

edited May 23 '17 at 10:33

Community

1
1

answered Jan 03 '15 at 10:46

Michelangelo

5,888
5
31
50

score 0 · Answer 4 · answered Jan 03 '15 at 11:08

You want it to be cols="100", but you also want it to shrink when the viewport gets smaller.

Instead of width: 100% (which will override the cols attribute), use max-width: 100%. The textarea max width will be its specified column value, and it will also shrink if needed.

textarea {
  resize: none;
  max-width: 100%;
  box-sizing: border-box;
}

<textarea cols="100"></textarea>

width:100% stretches to the border - textarea

4 Answers4