[drupal-devel] Styling Width of form_textarea and form_textfield

[Jeff Robbins]

We've propably all seen fixed width themes that get "blown out" on the 
right side by textfields and textareas that have their $size value set 
rather large. The form elements overlap any right side borders or 
background elements and it doesn't look very professional. (See 
attached jpg)

-------------- next part --------------
A non-text attachment was scrubbed...
Name: BlowOutShot.jpg
Type: image/jpeg
Size: 34169 bytes
Desc: not available
Url : http://drupal3.drupal.org/pipermail/development/attachments/20050715/ca18f655/BlowOutShot.jpg
-------------- next part --------------


One solution is to make a CSS rule that looks something like this:

.textarea, .form-text {
   width: 95%;
}

But this quickly hits a major usability problem when a user encounters 
a textfield for, say, a numeric input requiring a value less than 100:

form_textfield($title = t('Number Less Than 100'), $name = 'example',
     $value = '0', $size = 2, $maxlength = 2);

Usability-wise, this ought to be a narrow textfield to imply a small 
entry value. (See 'Number of places after decimal separator" in the 
attached jpg.) But the CSS rule would make this item 95% of the width 
of it's parent.

So before I post an issue asking for themeable form_textfield and 
form_textarea. I thought I'd open it up to discussion as to whether 
there might be a better solution.

I see a drupal setting... or better yet a theme setting that would set 
the maximum textfield/textarea $size value, before it gets a

style="width:95%"

added to its attributes.

Then form_textfield would look something like this:

function form_textfield($title, $name, $value, $size, $maxlength, 
$description = NULL, $attributes = array(), $required = FALSE) {
   $size = $size ? ' size="'. $size .'"' : '';

   // this is the new stuff 
******************************************************
   if ($size > theme_get_maxfieldsize() && !strstr("width", 
$attributes['style'])) {
     $attributes['style'] = "width:" . theme_get_overmaxval(); // <-- 
percent, ems, pixels or any css value
   }
   // also note that the function's $attributes argument
   //    has been set to default to array() rather than NULL
   // end new stuff 
**************************************************************

   return theme('form_element', $title, '<input type="text" 
maxlength="'. $maxlength .'" class="'. _form_get_class('form-text', 
$required, _form_get_error($name)) .'" name="edit['. $name .']" 
id="edit-'. form_clean_id($name) .'"'. $size .' value="'. 
check_plain($value) .'"'. drupal_attributes($attributes) .' />', 
$description, 'edit-'. $name, $required, _form_get_error($name));
}

Think I'm headed in the right direction with this?

I'd like to hear some other opinions.

-Jeff Robbins
                               _   _      ________
                              (_) (_)__  / __/ __/ _________  ____ ___
    robbins at jjeff.com        / / / / _ \/ /_/ /_  / ___/ __ \/ __ `__ \
    www.jjeff.com           / / / /  __/ __/ __/_/ /__/ /_/ / / / / / /
    aim: jefforbit       __/ /_/ /\___/_/ /_/  (_)___/\____/_/ /_/ /_/
                        /___/___/