It’s just data

Fun with CSS - Not

It is a small thing, but I always wanted my comment form to grow and shrink to match the window it is in. This would seem like a fairly easy thing to do, and in fact the code below is very simple, but behind it is a story:

 input[name="name"], input[name="email"], input[name="url"],
 textarea[name="comment"] {
   width: 100%
 }

What this code does is take the three input text fields, and the one textarea and makes them take up 100% of the width of the block in which they are embedded. Seems simple enough.

What took time was trying to find something that would work in IE.  And failing that, finding something that wouldn't look like crap in IE.

Update: any Microsoft readers of this weblog with access to the IE dev team? I've captured a snapshot of this blog entry with the style added directly to the input and textareas.  Go down to the comment textarea.  Type in any character.  The textarea bizarrely expands. That's what I am trying to avoid.


I don't have IE to hand at the moment, but have you tried setting classes on the relevant elements rather than using attribute selectors (which IE doesn't support)?  input.stretch { width: 100%; } might just do the job, if you put class="stretch" on the elements you want to stretch across the whole containing element.

Posted by Simon Willison at

This is shot in the dark but try removing the cols=40 from the textarea.

Posted by Ron Green at

Simon: the reason I am using attribute selectors is explicitly to hide the CSS from IE.  If it sees the width, it does weird things with the textarea.

Ron, nice try.  Unfortunately it doesn't work.

Posted by Sam Ruby at

> any Microsoft readers of this weblog with access to the IE dev team?

I don't know anything about CSS or have access to the IE development team. However, myself and others (http://radio.weblogs.com/0117167/2003/05/17.html#a306) have been saddened by the seeming lack of anything happening other than bug/security fixes from the IE devolpment team. I hope we will see more soon. Maybe Don or someone can pass this on or enlighten us to the current state of the team?

Posted by Sam Gentile at

Ok, this looks like it is an issue with the middle box. Since I can't see your CSS I am going on the assumption that it has no fixed size and therein lies your problem. If you set the width of the middle box to say 700px the problem goes away since the reference to width:100% now has something to refer to. Obviously this is not an option. According to Eric Meyer's CSS 2.0 book this is the way it is suppose to work. The fact that the input boxes work the way you wanted is what is actually broken in IE. There might be away around this. I'll try to take a look into this a little further.

Posted by Ron Green at

"have been saddened by the seeming lack of anything happening other than bug/security fixes from the IE devolpment team"  Here here!  I've got a list of improvements I'd like to see and IE just ain't keepin' up with the times.

Posted by James Snell at

Ron - my css can be found here.

Posted by Sam Ruby at

Just discovered that if you type in a letter, textarea expands to left edge of window and then grab the lower right corner and resize it snaps back in place.

Sorry, Sam. This is over my head. I really am not sure this is fixable.

Posted by Ron Green at

Ron, now you see why I chose to use attribute selectors - something that IE does not currently support.  It makes more sense to me to present IE users with a fixed width text area than a bizarre expanding and contracting one.

Hopefully when (if?) IE supports attribute selectors, they will correct this behavior.

Posted by Sam Ruby at

I agree but I'm not holding my breath. Like everyone else, I do not understand what's going on with ie and futire development. I noticed that of all the MS employees blogging, I haven't seen one person from the IR team. A little strange? Maybe MS thinks that any further development of IE would be viewed as anti-competitive.

Posted by Ron Green at

The Future of Internet Explorer

I Just said something to Sam Ruby in a comment that has caused me to stop and think. We are currently seeing all kinds of supposedly leaked information and screenshots of MS's next operating system, Longhorn. This is not due out till the end of 2004...

Excerpt from Slightly Bent at

What's funny is that if you take the Textarea with inline style out of the comment div (also tried putting it in a table, worked), it works. Also, I just tried putting cols=100% and it also works to some degree although it is not legal markup.

Posted by Deepak Sharma at

Nice nice nice!

Screw IE!  People should be migrating to Mozilla anyway! :)

This is a really important issue for me.  Weblog commenting should be very easy. 

BTW... I am going to implement the CommentAPI shortly in NewsMonster and user Interwingly as a test. 

Commenting around a URL should not be hard! 

Kevin

Posted by Kevin Burton at

Sam, I'm using IE6 on WinXP here. Nothing's expanding in any way, bizarre or not. Three one-line fields,name email and url, and this one large box for comment. I don't know, maybe it's a version thing, or maybe you've changed something since the problem was ocurring.

-Steven

Posted by steven at

Here's what I am running:

Microsoft Windows XP [Version 5.1.2600]

MS IE Version 6.0.2800.1106.xpsp2.021108-1929
Cipher Strength: 128 bit
Product ID:55274-005-3329155-22193
Update Versions:; SP1; Q328970; Q324929; Q810847; Q813951; Q813489; Q330994;

Posted by Sam Ruby at

dflsjgk sj'dfs;p4j'dsfpjg'dfspjg 'dsf;gjl
'sdjg
dsf j
gfdslk
fdsgk
dfs;gk
f;dljkg'j'dkfl;g j;lkdfjgl; dkjlkdf/;j 'dfjg 'dfsjg
sdfj k
sdfkj
dfjkg
l;dfsjg
'sdfl;jg
dsfl;'j g
sdfljg
sdjfg
s[dfjg
[sdfjk
g

Posted by fd gfdgjodpfj dfljglkdfjg l;dskfjg ldfj;lkdfh gldf at

Oops... sorry about that. I was trying to see what you meant by "bizarrely expands" - but nothing happened, other than my martian post getting posted.

Sorry for littering.

Posted by carlos at

Sam Ruby: "What took time was trying to find something that would work in IE. And failing that, finding something that wouldn't look like crap in IE."...

Excerpt from Scripting News at

Sam Ruby: "What took time was trying to find something that would work in IE. And failing that, finding something that wouldn't look like crap in IE."...

Excerpt from Scripting News at

http://realworldstyle.com/forms.html

Give it a try

chuck

Posted by c.d.embrey at

IE: Epilogue

Robert Scoble has responded. I guess I can't say I'm surprised by his answer. I'm sure if he were in position to give details he would. I appreciate the effort he made though. What I really wanted to hear was that MS was working on a new release...

Excerpt from Slightly Bent at

I don't pretend that it's a good solution (after all, it's a workaround for a bug), but http://www.cherrydigital.com/~dmouse/samruby.html seems to do what you want. Also there are possibly things I've done that could be improved.
The css is at http://www.cherrydigital.com/~dmouse/samruby.css

important changes:
1) removal of the comment form anchor tag - this still needs to be fixed
2) change the left and right margin styles to be padding
3) (2) necessitates the use of another class to contain the actual centred content
4) the use of a fieldset inside the form. not sure why, but one inside the fieldset, widths seem to be applied properly again.
5) various styles on the form and fieldset to  provide the border for the "add your comment" area  .

Posted by Phil Wilson at

If anyone would like to say if that solution actually works for them, that would be fine too. ;)

Posted by Phil Wilson at

Phil - sorry, I've been busy.  I appreciate your effort and I will look into it more closely when I return home.  At the moment, your page doesn't quite look right in Mozilla (the dashed line is rather pale).  I also don't like the idea of deploying such a thing until I understand how it works... the fieldset "magic" bothers me a bit.

Posted by Sam Ruby at

That's OK Sam, my comment wasn't really aimed at you anyway, we all know you're very busy atm.

Yes, the pale border in Mozilla was slightly strange, but a quick change to the fieldset style sorts that.

The fieldset is what actually enforces the correct width on the textarea. If you just remove the opening and closing fieldset tags, the textarea returns to its old, bad behaviour. Obviously IE is broken here.

In truth, adding the fieldset was one of the first things I did in trying to fix this problem, removing the <div class="comment">, with which you seemed to be emulating the purpose of a fieldset.

Seeing as it also provides a workaround for this particular bug, I don't see any harm in it.

The "worst" part of this solution IMO is that the new 'centre' class uses padding instead of margin to place its content.

Posted by Phil Wilson at

your comments were tested again. also you have to get a discussion going here on Don Park's funky comment. by the way, thanks Sam for providing the rest of us the service of your blog comments.

Posted by Randy Charles Morin at

Randy, Don has comments enabled.

Posted by Sam Ruby at

The Future of Internet Explorer

The Future of Internet Explorer I Just said something to Sam Ruby in a comment that has caused me to stop and think. We are currently seeing all kinds of supposedly leaked information and screenshots of MS's next operating system, Longhorn. This is...

Excerpt from Kingsley Idehen's Blog at

Phil,

Your links seem to be broken but, yes, fieldset fixes the expand-when-you-type behaviour! THANX a lot for pointing it out!

Now... it seems that fieldset comes with its own bug: unwanted padding between the fielset and the textarea.

I'll look into this a little closer some day... Anyway, I don't know how you addressed this (centering?) but I've discovered something strange: put a character (for example a dot) between the fielset and the textarea tags and the unwanted padding disappears! --> Looks like this is the return of the single pixel GIF spacer!! :)))

-François

PS: Sam, thanx for having brought that up :)

Posted by François PLANQUE at

Workaround demos:

http://fplanque.net/2003/Articles/iecsstextarea/

Posted by François PLANQUE at

OK, I was messing around with this because I love a challenge.  So this is what I came up with after messing with some examples that I'd seen that don't really seem to work very well.

<fieldset style="width: 100%; border: 0px">
<legend align="left">
<textarea name="comment" rows="12" style="width:100%">
</textarea>
</legend>
</fieldset>

It's dirty, but it works.  One thing I did notice is that <textarea> ends up being slightly less in width than the other input fields, but it's centered, so it seems like it was designed that way.

Posted by Liquibyte at

Ooops, forgot to check Opera too.  Sorry I don't have or use Netscape or others.  Can anyone else check this code?

<fieldset style="width: 100%; border: 0 black dotted;">
<legend align="left">
<textarea name="comment" rows="12" style="width:100%">
</textarea>
</legend>
</fieldset>

Hope this helped.

Posted by Liquibyte at

Francois - thanks for the pointers that linkrot strikes again!

In the meantime, my original solution now lives on http://philwilson.org/code/tests/samruby.html .

We actually came up against this at work very recently, so hurrah to Sam for giving me the chance to solve it months ago (even if it is a rubbish solution). :)

Posted by Phil Wilson at

Acabo de descubrir que los estilos para un fielset no funcionan en windows xp a no ser que tengas la configuración de la apariencia en modo clásico.
- - - - - - - - - - - - - - - - - - -
I have just to discover that the styles for a fielset do not function in windows xp to be not that you have the configuración of the appearance in classical way.

Posted by LoverFunker at

Just ran into this in a page I was working on, big ups to Phil and François for the quick solution!

Posted by Micah at

Sam Ruby: Fun with CSS - Not

[link]...

Excerpt from del.icio.us/tag/css at

The textarea width thing still happens in IE7 beta 1.

Happy days...

Posted by Mike P at

Hi,

I came up with something that does seem to work, but only for my purposes which is a textarea which takes up the whole screen.  I registered a resize event for the window so I could resize the height of the textarea.

<script>
function register(e)
{
var tx = document.getElementById('comment');
tx.style.height = (document.body.clientHeight - 35);
return true;
}
window.onresize = register;
</script>
<form>

<textarea id="comment" name="comment" style="{height:700px; width:100%}">
</textarea>

The -35 in the above, is because clientHieght seems to take into account perhaps
status bar, etc.

Hope this is helpful

Posted by Jason Pell at

Sam recently contacted me about this issue, to see if it was fixed in IE7.  It turns out it was an issue we hadn’t bugged yet.  We raised a bug, and I’m pleased to report that we expect the fix to show up in the public Beta 2 of IE7 (probably out in a few moths).  I’ll post back here with the location of the build that fixes it when we release.  Thanks to Sam for reporting the issue and staying with it until we could fix it!

Posted by Joshua Allen at

Beel on "Comments form hid under sidebar"

Ah, most of the themes I have run across have it set to 100% but 98% will do it, too. It is a bug in IE that will not let you set a variable width textarea without, as the author below notes, “looking like crap”...

Excerpt from WordPress Support Thread: Comments form hid under sidebar at

“we expect the fix to show up in the public Beta 2”

Screencap: [link]

Posted by Joshua Stengel at

I just ran into the same problem as you did...
The solution I came up with just now is still not beautiful, but it is cleaner than the <fieldset> hack suggested above. The main problem I had with the <fieldset> is that it cannot be nested in a paragraph, which was one of the elements I used for formatting. My solution is to use a table:

<table><tr><td><textarea></textarea></td></tr></table>

Then use your style-sheet to set everything (table, td, textarea) to 100% width and all borders, margins and paddings to 0.

Hope this helps...

  Markus

Posted by Markus at

I think this one works best:
<style>
textarea
{font-family: MS Sans Serif; font-size:10pt; margin-left:0px; width:100%}
</style>

By adding the style, which can be in the body or in a style-sheet the textarea grows with the screen.

Ricardo

Posted by Ricardo J. Miquilarena at

Hmm. I’m using WinXP and IE7 and nothing seems to be happening to any textboxes when I type any characters (and I am talking about the checkboxes in your snapshot, not the ones I am using to post this text).

Posted by David at

I was also having expanding IE textarea problems but none of the above fixes worked - my textarea was inside a <dl> which may be why.

Anyway eventually I have found a fix that worked for me so hopefully this is of use to others: enclose the <textarea> in a <fieldset> with borders set to zero AND a <div> as well. So you end up with:

<fieldset style="border: 0;"><div><textarea style="width: 100%;" ... ></textarea></div></fieldset>

Posted by Simon at

I just had this problem, and found that a span works as well as a fieldset for the workaround. I surrounded my textarea with a <span style="width: 100%">, and that did the trick. Not sure if it’ll work for anyone else.

Posted by Moss at

Beel on "Comments form hid under sidebar"

Ah, most of the themes I have run across have it set to 100% but 98% will do it, too. It is a bug in IE that will not let you set a variable width textarea without, as the author below notes, “looking like crap”...

Excerpt from WordPress › Support » Topic: Comments form hid under sidebar at

Add your comment