Download & Extend

Change 95% textarea width to 100%

Project:Drupal core
Version:7.x-dev
Component:markup
Category:task
Priority:normal
Assigned:Unassigned
Status:closed (fixed)

Issue Summary

The only reason I can think for textareas being set at a width of 95% in system.css is to make it more tricky to align the right-hand-side of forms properly.

Comments

#1

I may be wrong on this but I think it was set to 95% because the container markup <form> doesn't have any position rules making it adjust to the next parent wrappers width. Or it's because of any padding applied to the form fieldsets are calculated differently from IE and other standard browsers. 95% was just a safe measure.

A fix for this would be great.

#2

Unfortunately 100% doesn't always mean 'fill up the available space', since it also takes into account any padding and borders on the element, thus making textareas 100% + 4px. I'm fairly sure that IE is consistent with other browsers except when it comes to table elements, which IE greatly exaggerates the width of.

The only fix I'm aware of is to use a barely supported CSS3 property - box-sizing: border-box.

I'll keep looking for a solution we can use now.

#3

Yea, the reason for using 95% width is most likely the box model bug (which W3C would argue is "by design"). It's a very tricky bug, and 95% is a simple hack that works pretty well (unless you add ridiculous padding or border). Drupal's own CSS files are not that affected (except the border that the browser puts on the field, which adds a few pixels to 100%), I suppose the 95% width is there so that themers won't have to worry about the box model bug.

While 100% width would be lovely, I don't see a good way to achieve it without breaking the layout :-\

Anybody know of a good hack?

#4

Status:active» closed (works as designed)

Setting this to "by design" since a better solution to the box model bug remains elusive. If anyone comes up with a cleaner solution, feel free to re-open this issue.

#5

FYI, cross-linking this #735628: Resizable textarea behavior leads to unpredictable results as we're fixing the 95% issue over there. Box-sizing support is much better now, and the result is actually a significant cross-browser improvement. :D

#6

Component:theme system» markup
Status:closed (works as designed)» fixed

#735628: Resizable textarea behavior leads to unpredictable results landed. Absolutely kick-ass work! Please post any follow-ups on that issue, not this one.

#7

Status:fixed» closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

nobody click here