By tyswan on

Hi, I'm using the Andreas01 theme, which is great, except that some of the input fields are too wide and slop over into the right sidebar. I know I can edit the contact module, but surely there's a cleaner way to do this.

I have used this thread and this thread to sort out my textareas. So thanks everyone for that.

I've tried fooling around in the CSS, and seem to have fixed everything except these 3 fields.

The problem I have now is with input type of "file"

<input type="file" name="edit[flexinode_8]"  class="form-file" id="edit-flexinode_8" size="60" />

and my contact form name & email address fields:

<input type="text" maxlength="255" name="edit[name]" id="edit-name"  size="60" value="tyswan" class="form-text required" />
<input type="text" maxlength="255" name="edit[mail]" id="edit-mail"  size="60" value="tyswan@blahblah.com.au" class="form-text required" />

Interestingly enough, the subject field is okay:

<input type="text" maxlength="255" name="edit[subject]" id="edit-subject"  size="60" value="" class="form-text required" />

Any help would be greatly appreciated,

Cheers,
tys.

⋅ Categories: Drupal 4.7.x

Comments

tyswan’s picture

tyswan commented

Okay, managed to style the contact form input fields using CSS (silly mistake).

But still can't change the width of the input file field - and it seems to be a firefox issue!

Has no-one else come across this? Surely there are themes all over the place that get broken with this???

So now, I need to change how Drupal displays input fields, set the maxlength, and re-define the size attribute (I think).

Any pointers?

Cheers,
--
tys

behindthepage’s picture

behindthepage commented

Yep, sure is a pain in the butt. The designer that I work with likes narrow
fixed width themes (eg www.helporphansnow.org.au )so I am slowly adding to my CSS all the input fields
that need to be disciplined. For the File input field do the following:

Edit the theme_file function which is in form.inc in the includes folder

I have changed it below to size =35. Copy and paste and change 35
until it is right for you. Don't forget to check it in IE and the other
mutant browsers.

function theme_file($element) {
  _form_set_class($element, array('form-file'));
  return theme('form_element', $element['#title'], '<input type="file" name="'. $element['#name'] .'"'. ($element['#attributes'] ? ' '. drupal_attributes($element['#attributes']) : '') .' id="'. form_clean_id($element['#id']) ." size=\"35\" />\n", $element['#description'], $element['#id'], $element['#required'], form_get_error($element));
}

Let me know if this is right as I have only used the file field in my own modules.

Good to see another aussie!

Regards
gpdinoz
www.behindthepagephp.com
"Everything should be made as simple as possible,
but not simpler." - Albert Einstein

Regards
Geoff

tyswan’s picture

tyswan commented

Hey gpdinoz,

Thanks for the tip. I combined your suggestion with overriding the theme rather than editing the core files. This is what i got:

I edited my template.php file (bluemts01 is my modified Andreas theme)

/**
 * Catch the theme_item_list function, and redirect through the template api
 */
function bluemts01_file($element) {
  // Pass to phptemplate, including translating the parameters to an associative array. The element names are the names that the variables
  // will be assigned within your template.
  return _phptemplate_callback('file', array('element' => $element));
}

Then created the corresponding file.tpl.php

/***
 * Customised formatting of input type="file" to prevent theme breaking
 * These fields are available:
 * $element
**/

// Change the default $size

  _form_set_class($element, array('form-file'));
  $output = theme('form_element', $element['#title'], '<input type="file" name="'. $element['#name'] .'"'. ($element['#attributes'] ? ' '. drupal_attributes($element['#attributes']) : '') .' id="'. form_clean_id($element['#id']) .'" size=\"40\"' ."\" />\n", $element['#description'], $element['#id'], $element['#required'], form_get_error($element));

print $output;

(I modified your code slightly as there was a missing quote.)

And hey presto, it works, and it's beauuutiful.

Thanks for your help. And yes it's always nice to meet another aussie in the forums.

Cheers,
--
tys

behindthepage’s picture

behindthepage commented

Yes overriding the theme is a more sophisticated way to do it.
How did you use my code in the context of overriding the theme.

Maybe if we are really clever we could come up with some code that adds a size="X" to all of the input fields. Probably using form_alter. Hmmm I will ponder on that one.

What site are you building?

gpdinoz
"Everything should be made as simple as possible, but not simpler." - Albert Einstein

Regards
Geoff

tyswan’s picture

tyswan commented

Sorry for not getting back to you earlier on this one. I've been madly trying to get my site up.

Okay, i pretty much explained all that needed to be done, but there's a wrapping problem with long code snippets. Let's try again.

I overrode the default theme_file function by editing my template.php as descibed above, and implementing the code you suggested in my newly created file.tpl.php

/***
 * Customised formatting of input type="file" to prevent theme breaking
 * These fields are available:
 * $element
**/

// Change the default $size

  _form_set_class($element, array('form-file'));

  $output = theme('form_element', $element['#title'], '<input type="file" name="'. $element['#name'] .'"'. ($element['#attributes'] ? ' '. drupal_attributes($element['#attributes']) : '') .' id="'. form_clean_id($element['#id']) .'" size=\"40\"' ."\" />\n", $element['#description'], $element['#id'], $element['#required'], form_get_error($element));

print $output;

(I've left the php tags out so that you can see the code.)

What we really need to get at is the variable
$element['#size'], which is in the array sent to the form_file function from goodness knows where...

Anyway, a problem for another day and some spare time ;)

Had a look at the site you mention, and it's very nice. Wish my site was as uncluttered...

I'm working on a community portal in the Blue Mountains. It's live-ish (no users yet) if you want to check it out.

Cheers,
--
tys

BLUE MOUNTAINS health & harmony
www.health-harmony.com.au

building an alternative health & spirituality community in the Blue Mountains

behindthepage’s picture

behindthepage commented

Your site looks great, very professional and clean. I think you are just fishing for compliments. :-)
Thanks for the code. I will use this sophisticated way in the future.

One day I might work on the size problem. Not feeling very motivated at the moment.

gpdinoz
"Everything should be made as simple as possible, but not simpler." - Albert Einstein

Regards
Geoff

OpenChimp’s picture

OpenChimp commented

I'll probably have need for this when refining my themes in the future.

Thank you.

Michael
www.webemulsion.com

paul303’s picture

paul303 commented

hi
i'm brand-new to drupal, so i just found this thread, because i have the same problem.
i thought about this solution:

in template.php

function bluemts01_file($element){
	$element['#size'] = 20;
	return theme_file($element);
}

it works in my theme, but i'm not sure if it is really elegant.
what do you think?

behindthepage’s picture

behindthepage commented

er....Does it work for text areas?

gpdinoz
"Everything should be made as simple as possible, but not simpler." - Albert Einstein

Regards
Geoff

rkendall’s picture

rkendall commented

@paul303 - you said you were new to Drupal, but your solution is the best :)

I wanted to adjust the textfield size on the user registration page, so my slight adaption is:

<?php
// change default textfield size from 60 to 50
function yourthemename_textfield($element){
  $element['#size'] = 50;
  return theme_textfield($element);
}
?>

Obviously, it would be nice to specify the field size on an individual basis when creating custom profile fields, but that's a bigger issue.

For those that didn't quite follow:
1. Create a file called template.php in your theme directory (if it doesn't exist)
2. add in the appropriate theme function, replacing the first part of the function name with your theme name (eg. function bluemts01_file($element){ becomes function yourtheme_file($element){ )
3. Bob's your uncle

--
Ross Kendall
UK based Web and IT consultant specialising in Free and Open Source Software technologies.
http://rosskendall.com

justlikethat’s picture

justlikethat commented

Followed so many threads just to resize the file input field. This is perfect solution. Thank you! Working on 5.3

pburt16’s picture

pburt16 commented

Good afternoon,

I've been trying to implement your solution for the Andreas01 input fields width problem.

Would you be willing to take a moment to describe the process in more detail? Step by step as though you were describing the process to a child.

I can't seem to get the solution to work and I suspect it is rather simple - I may be missing something in assigning the input filed names/id's ... I assume a separate array needs to be set up for each input field? May be doing that incorrectly.

Thanks, I'd appreciate the help.
-prb

behindthepage’s picture

behindthepage commented

Which process do you need explaining? CSS or Theme template?

They both work but different ways.

gpdinoz
"Everything should be made as simple as possible, but not simpler." - Albert Einstein

Regards
Geoff

pburt16’s picture

pburt16 commented

I'd like the fix to work "Like magic".

thanks,
-p

tyswan’s picture

tyswan commented

Hi,

I can't help you with paul303's suggestion, but the original solution works fine.

Please note that this part only fixes the input type of "file". Everything else can be fixed through the CSS.

I'll assume that your theme is called mytheme.

Step 1

Firstly, edit your template.php file (should be in your mytheme folder), and add the following code to the bottom (but inside the closing php tag "?>"):

function mytheme_file($element) {
  // Pass to phptemplate, including translating the parameters to an associative array. The element names are the names that the variables
  // will be assigned within your template.
  return _phptemplate_callback('file', array('element' => $element));
}


Step 2

Now create a file called file.tpl.php and past in the following code:

<?php
/***
 * Customised formatting of input type="file" to prevent theme breaking
 * These fields are available:
 * $element
**/

// Change the default $size

  _form_set_class($element, array('form-file'));
  $output = theme('form_element', $element['#title'], '<input type="file" name="'. $element['#name'] .'"'. ($element['#attributes'] ? ' '. drupal_attributes($element['#attributes']) : '') .' id="'. form_clean_id($element['#id']) .'" size=\"40\"' ."\" />\n", $element['#description'], $element['#id'], $element['#required'], form_get_error($element));

print $output;

?>

In the above code, find the bit that says size=\"40\" and replace the 40 with whatever value is appropriate for your theme.

Step 3

Upload both files to your theme folder mytheme

That should do the trick.

--
tys

BLUE MOUNTAINS health & harmony
www.health-harmony.com.au

building an alternative health & spirituality community in the Blue Mountains

pburt16’s picture

pburt16 commented

Unfortunately, I couldn't get it to work. Either not doing something correctly or perhaps a Drupal v5 compatibility issue (although I don't imagine it makes a difference).

Instead of beating my head against a wall, I simply edited the modules and added a "Size" attribute to the text input IDs that were given me problems.

Did the job ... just a bit of eye strain locating the correct IDs in monotonous code.

Thanks Again,
prb

talkstrata’s picture

talkstrata commented

Thanks for the step-by-step. I found at the end that only the first character of the field title and description were showing. I changed the function to:

_form_set_class($element, array('form-file'));
  $output = theme('form_element', $element, '<input type="file" name="'. $element['#name'] .'"'. ($element['#attributes'] ? ' '. drupal_attributes($element['#attributes']) : '') .' id="'. form_clean_id($element['#id']) .'" size=\"40\"' ."\" />\n", $element['#description'], $element['#id'], $element['#required'], form_get_error($element));

print $output;

and it worked fine. In case it's hard to find, the second argument passed into theme() is changed from $element['#title'] to $element

PixelClever’s picture

PixelClever commented

Is there a particular reason that you added the second half of the code in a separate file? I did the complete theme overide in the template.php and it worked fine.

Anonymous’s picture

Anonymous (not verified) commented

Just wanted to say thanks for this. I was scratching my head trying to find a solution to the very same problem when I came across this post. It worked perfectly for me.

tanc’s picture

tanc
he/him
Primary language English
Location Italy
commented

I find css can style most elements but for type='file' inputs you need this snippet:

// change default file field size from 60 to 40
function phptemplate_file($element){
  $element['#size'] = 40;
  return theme_file($element);
}

Stick that in your template.php file and change '40' to whatever you want.

bwill’s picture

bwill commented

I had the same issue, but did not need to override anything. If all you are looking to accomplish is changing the width of these 3 input areas, you just need to modify your themes style.css as follows:

#edit-name, #edit-mail, #edit-subject{
width: 90%;
}

You can change the 90% to a length in pixels. In my case they are resized to 90% of the div's width they are in. Since your theme's CSS file is placed after all the others Drupal imports, styles placed here override the styles in the module code - thus the name Cascading Style Sheets. Yuo can view the source to see the class or Id you need to modify, or better yet use Firefox with the Firebug addon.

ha5bro’s picture

ha5bro commented

Tanc's code worked best for me. File inputs have long been a problem for me, thank goodness I finally found a fix!

[[[ ALL HAIL THE ALMIGHTY GOOGLEBOT ]]]

Dale Brendan’s picture

Dale Brendan commented

Hrrm... This just does seem to work for me on Drupal 6.x

<input type="file" size="60" id="edit-field-clientfiles-1-upload" class="form-file" accept="txt,dwf,dwg,gif,png,jpg,jpeg,bmp,ai,psd,pdf" name="files[field_clientfiles_1]"/>

...and want to change size="60" to "30".

In my template.php file:

// change default file field size from 60 to 40
function phptemplate_file($element){
  $element['#size'] = 30;
  return theme_file($element);
}

Yet, nothing. Have tried this a few different ways without success. Ideas?

Dale Brendan’s picture

Dale Brendan commented

The above did work for Drupal 6.x

Remember to clear cache /admin/settings/performance

rsanan-1’s picture

rsanan-1 commented

How do I make the File attachment a required field?
I am trying this and it does put the red star next to the title but does not validate it

function phptemplate_file($element){
		$element['#required'] = TRUE;
		return theme_file($element);
}
candelas’s picture

candelas commented

i couldnt make it work in durpal 6.20, so i did it with jquery

$("#edit-upload").attr('size', '30');

maybe because my theme has an underscore? (mien_violeta)
but if somebody can explain, i would like to learn.
i tried all the solutions that are given here and i cleared my cache.
thanks

//trying to answer one question for each one that i make.
//this way, drupal will be more friendly and strong

RobertNelsonVance’s picture

RobertNelsonVance commented

Any idea if this can be implemented for drop down menus as well.

For example, I have uploaded images to my site using Image Attach. The titles of some of the images were pretty long. Now when I go to create a new node, the Image Attach fieldset is wider than my content area in my theme because it's automatically as wide as the text within in its box.

If I could do something that would make it so that this box was no wider than my theme, that'd be great.

Thanks for any input.

tinny’s picture

tinny commented

in template.php

// swap MYTHEME with the name of your theme
function MYTHEME_file($vars) {
	// change size to 20
	$vars['element']['#size'] = 20;
	// do not change this name to your theme name
	return theme_file($vars);
}