473,695 Members | 2,444 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 misunderstandin g 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="textarea ctr">
<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 14486
I think if you define width:auto for a textarea, the browser gets the
width from the cols-attribute.
But not sure.

Chris
ph*******@treef ic.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 misunderstandin g 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="textarea ctr">
<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*******@treef ic.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="textarea ctr">
<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;b order:1px solid #000000;">

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

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

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

</div>

Louise
Jul 21 '05 #3
boclair wrote:
ph*******@treef ic.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="textarea ctr">
<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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
2563
by: Phil Powell | last post by:
The customer made a wild request: they want on their admin panel a textarea that will display an existing resume. This textarea, however, must have a dynamic width, one that "fills the screen width of any sized screen". Sorry but I cannot fathom how to do this! <textarea name="resume" cols="108" rows="29" wrap="physical><?= $resume ?></textarea>
3
4953
by: Phil Powell | last post by:
<script type="text/javascript"> <!-- function getWinWidth() { isNav = (document.all) ? false : true; isIE = (document.all) ? true : false; if (isNav && !isIE) return(window.innerWidth); else if (isIE && !isNav) return(document.body.clientWidth);
9
2739
by: Paul Gorodyansky | last post by:
Hi, FAQ tells how to insert (or replace0 a text at a caret position in Mozilla (and same works for Opera 8+), for example, at http://www.faqts.com/knowledge_base/view.phtml/aid/1661 it talks about that - .... textControl.setSelectionRange(oldSelectionStart + newText.length, oldSelectionStart + newText.length);
1
5686
by: Nic | last post by:
Hi - I am battling to find the a resource, so maybe some one in here can help The problem is as follows: I am trying to build a mod_perl source code editor for the web - to edit Perl source code in a browser. The trick is that I want to add syntax highlighting to a HTML TEXTAREA tag. There are millions of resources for just normal text color and background colors (and images), but nothing on keyword highlighting.
1
7853
by: NullBock | last post by:
Hi, I'm trying to create a form with a text-input (not textarea) that expands to the size available, using CSS. I thought that a simple display:block would work: <form> <div> <input type="text" style="display: block"> </div>
1
1933
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Strict kills my widths!</title> </head> <body> <table style="width:400px; table-layout:fixed;">
8
5546
by: Csaba Gabor | last post by:
Is there any way in Mozilla/Firefox to add an event listener to all textarea elements? Something along the lines of HTMLTextAreaElement.prototype.onkeydown = function() {alert('mom');} only it should work, too. Or is my only solution to loop through each one and use ..addEventListener? And then trap for any DOM modifiactions in case new ones are created. Thanks,
1
7476
by: tranky | last post by:
Hola boys, i've a question for you! It's possible to highlight some text inside a textarea? (not all text, but a portion!) For example, i've this text inside a textarea. INSERISCI TESTO i want to highlight only "INSERISCI TESTO". It, must be an universal function, so i can use it also in other cases, for example when tag are and .
4
7787
by: Keith Bentrup | last post by:
Hi all, I wrote a simple search function to find text in a textarea where not all the text is visible (ie. the text box displays 10 lines but there may be more than 1000 lines to search). I can find the text and select it using the function below, BUT I can't figure out how to have the textarea automatically scroll to the selection in Firefox. Any ideas or suggestions? function search(needle,haystack,start) { var element =...
0
9120
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8998
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8857
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8831
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7668
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6494
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4346
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3013
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
1979
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.