Width of textarea in Mozilla

[phil_gg04]

Dear CSS Experts,

I want to make a textarea fill all the available width. This is
something I've done before but mostly by trial and error; now I want to
understand what is going on. So I try:

textarea {
margin-left: 0;
margin-right: 0;
width: auto;
}

But it doesn't work, I get something narrow. (All testing with Firefox
1.0. I'll worry about issues with other browsers later.) Of course,
if I do

width: 100%;

it seems to work, but actually because the 100% is the content width
and there are a few pixels of borders present it is overflowing
slightly. You find a lot of sites with width: 95% or similar for this
reason.

But why doesn't the original style work? It seems that mozilla
implements a textarea as approximately display:inline-block where
width:auto means shrink-wrap (CSS2.1). OK, so let's change it:

textarea {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}

But this doesn't work either. I was hoping that explicitly giving it
display:block would change the meaning of width:auto, but it doesn't.

So is this a Mozilla bug ("meaning of width:auto does not change when
textarea has display:block")? Am I misunderstanding something? Is
there a better solution? Currently I think that the best method is to
put an extra div around it in the markup:

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

div.textareactr textarea {
width:100%;
}

(Previous experience also suggests that this is the best way to avoid
some of IE's weirdnesses, but I'm not worrying about them right now.)

Any thoughts?

--Phil.

[Chris Leipold]

I think if you define width:auto for a textarea, the browser gets the
width from the cols-attribute.
But not sure.

Chris
ph*******@treefic.com wrote:

Dear CSS Experts,

I want to make a textarea fill all the available width. This is
something I've done before but mostly by trial and error; now I want to
understand what is going on. So I try:

textarea {
margin-left: 0;
margin-right: 0;
width: auto;
}

But it doesn't work, I get something narrow. (All testing with Firefox
1.0. I'll worry about issues with other browsers later.) Of course,
if I do

width: 100%;

it seems to work, but actually because the 100% is the content width
and there are a few pixels of borders present it is overflowing
slightly. You find a lot of sites with width: 95% or similar for this
reason.

But why doesn't the original style work? It seems that mozilla
implements a textarea as approximately display:inline-block where
width:auto means shrink-wrap (CSS2.1). OK, so let's change it:

textarea {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}

But this doesn't work either. I was hoping that explicitly giving it
display:block would change the meaning of width:auto, but it doesn't.

So is this a Mozilla bug ("meaning of width:auto does not change when
textarea has display:block")? Am I misunderstanding something? Is
there a better solution? Currently I think that the best method is to
put an extra div around it in the markup:

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

div.textareactr textarea {
width:100%;
}

(Previous experience also suggests that this is the best way to avoid
some of IE's weirdnesses, but I'm not worrying about them right now.)

Any thoughts?

--Phil.

[boclair]

ph*******@treefic.com wrote:

I want to make a textarea fill all the available width.
So I try:

textarea {
margin-left: 0;
margin-right: 0;
width: auto;
}

I get something narrow. if I do
width: 100%;

it seems to work, but actually because the 100% is the content width
and there are a few pixels of borders present it is overflowing
slightly. OK, so let's change it:

textarea {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}

But this doesn't work either. I was hoping that explicitly giving it
display:block would change the meaning of width:auto, but it doesn't.

So is this a Mozilla bug Currently I think that the best method is to
put an extra div around it in the markup:

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

div.textareactr textarea {
width:100%;
}

(Previous experience also suggests that this is the best way to avoid
some of IE's weirdnesses, but I'm not worrying about them right now.)

Any thoughts?

--Phil.

In mozilla, as is compliant, the width is the width of the contents. In
any circumstances as has been pointed out to me recently here the cols
and rows attributes should be stated. This markup demonstrates the
treatment of width in the two browsers you mention.

div style="width:80%;margin:auto;border:1px solid #000000;">

<textarea cols="50" rows="5"></textarea>

<textarea cols="50" rows="5" style="width:100%;"></textarea>

<textarea cols="50" rows="5"
style="width:100%;padding:1em;margin:1em;"></textarea>

</div>

Louise

[boclair]

boclair wrote:

ph*******@treefic.com wrote:

I want to make a textarea fill all the available width. So I try:

textarea {
margin-left: 0;
margin-right: 0;
width: auto;
}

I get something narrow.

if I do width: 100%;

it seems to work, but actually because the 100% is the content width
and there are a few pixels of borders present it is overflowing
slightly.

OK, so let's change it:

textarea {
display: block;
margin-left: 0;
margin-right: 0;
width: auto;
}

But this doesn't work either. I was hoping that explicitly giving it
display:block would change the meaning of width:auto, but it doesn't.

So is this a Mozilla bug

Currently I think that the best method is to
put an extra div around it in the markup:

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

div.textareactr textarea {
width:100%;
}

(Previous experience also suggests that this is the best way to avoid
some of IE's weirdnesses, but I'm not worrying about them right now.)

Any thoughts?

--Phil.

In mozilla, as is compliant, the width is the width of the contents.

Badly put. For input and textareas elements it is the internal width.
Still badly put.

Louise