468,720 Members | 1,731 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,720 developers. It's quick & easy.

Width of textarea in Mozilla

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.

Jul 21 '05 #1
3 14270
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.

Jul 21 '05 #2
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
Jul 21 '05 #3
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
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Phil Powell | last post: by
9 posts views Thread by Paul Gorodyansky | last post: by
1 post views Thread by NullBock | last post: by
8 posts views Thread by Csaba Gabor | last post: by
1 post views Thread by tranky | last post: by
4 posts views Thread by Keith Bentrup | last post: by
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Oskars | last post: by
9 posts views Thread by bryonone | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.