A form input field is not sizeable. If I define a field with a textfield form item with a parameter such as '#size' => 10 it still shows as a text field filling (almost) the whole width.
The width:95% settings in node.css for the form-text class appears to be the reason for ignoring the size attribute of a form input field.
It occurs both in the garland and bluemarine themes.

It can also be noticed on the q=node/add/page page where e.g. the author field should have a width of only 60 characters, but occupies the whole width and increases with the size of the browser window.

CommentFileSizeAuthor
#7 node-form-input.patch954 bytesAnonymous (not verified)
#5 garland-node-form-input.patch441 bytesAnonymous (not verified)
#3 node-form-input.patch439 bytesAnonymous (not verified)

Comments

catch’s picture

catch
he/him
Primary language English
commented

Those css declarations have been there a very long time (at least since 4.7), so this might well be "by design". Is there are particular reason you can't overwrite this in your theme?

jpulles’s picture

jpulles commented

It can be overwritten in a custom theme, but I would expect that the standard css styling should conform to the form api. Could it be that css declarations that have been there a very long time, are not applicable anymore?

Anonymous’s picture

Anonymous (not verified) commented
Status: Active » Needs review
StatusFileSize
new node-form-input.patch439 bytes

Removed the width:95% from the node.css style sheet in the node module so that size assigned to input fields using the Forms API is actually effective.

Seems illogical to be able to assign a size to an input, but have it over-ridden by default.

catch’s picture

catch
he/him
Primary language English
commented

I think if you take it out of node.css, you should probably put it into Garland, otherwise this would change how the default install looks. Others might disagree though.

Anonymous’s picture

Anonymous (not verified) commented
StatusFileSize
new garland-node-form-input.patch441 bytes

Agreed, recommend the patch from #3 and this patch both be applied, so that the default install stays the same, but other themes are not required to override node.css.

catch’s picture

catch
he/him
Primary language English
commented
Status: Needs review » Needs work

boydjd, to get this reviewed and/or applied to core, it'll have to be one patch with both changes. Also, I don't have a strong opinion either way, but it might be worth seeing how this looks in the other core themes, and if they also need the same treatment.

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs work » Needs review
StatusFileSize
new node-form-input.patch954 bytes

Combined into a single patch.

Anonymous’s picture

Anonymous (not verified) commented

I'm thinking now that the theme should not specify 95%, as this does not solve the OP's problem. Recommend committing patch in #3 only.

coltrane’s picture

coltrane
he/him
commented
Status: Needs review » Closed (duplicate)

There is a larger problem here in that input size's are hard coded in system_elements(). I think we need a default styling applied after the hard-coded size is removed. I'm closing this as a duplicate of #196821: Input field sizes should be easly resizeable where I'd like to focus the work.