[drupal-devel] Styling Width of form_textarea and form_textfield
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) 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@jjeff.com / / / / _ \/ /_/ /_ / ___/ __ \/ __ `__ \ www.jjeff.com / / / / __/ __/ __/_/ /__/ /_/ / / / / / / aim: jefforbit __/ /_/ /\___/_/ /_/ (_)___/\____/_/ /_/ /_/ /___/___/
-1 for inline CSS. That is very hard to override. I think an additional class will do: class="formfield textfield fullwidth" and some additional style in drupal.css Ber Op vrijdag 15 juli 2005 17:58, schreef 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) Regards, Bèr -- [ Bèr Kessels | Drupal services www.webschuur.com ]
participants (3)
-
Bèr Kessels -
Jeff Robbins -
neil@civicspacelabs.org