input text fields in vertical tabs are stretched 100% [#1941764]

Lline 107 in sites/all/themes/shiny/css/vertical-tabs.css stretches input text fields in vertical tabs to 100% width.

.vertical-tabs .form-type-textfield input {
    -moz-box-sizing: border-box;
    width: 100%;
}

This CSS overrides the text field size attribute that can be set via the Field UI. I think it is confusing for the site builder.

Comment	File	Size	Author
#2	Selection_014.png	20.9 KB	batigolix

Comments

Comment #1

dudenhofer commented 18 March 2013 at 16:57

Status:

Active

» Closed (works as designed)

The help text above this line actually explains the reason behind this.

/**
 * Prevent text inputs from overflowing when container is too narrow. "width" is
 * applied to override hardcoded cols or size attributes and used in conjunction
 * with "box-sizing" to prevent box model issues from occurring in most browsers.
*/

This is a safe-guard to field sizes expanding the width of the overlay/page when these test inputs are set too wide. I tried using a max-width instead, but then if a text field size is set to a number that is wider than the page width, it will force scrolling or overlapping. Despite it being confusing to some one who is trying to style field sizes outside of CSS, I think this is probably best as it is. Especially since Seven in Drupal core works the exact same way.

Comment #2

batigolix

Dutch

Utrecht

commented 19 March 2013 at 15:18

Status	File	Size
new	Selection_014.png	20.9 KB

Thanks for the feedback & apologies for not having looked into it deeper.

Another reason I posted this, is that in the case of fields with a suffix (e.g. Integer fields), the suffix is displayed on the next line because the input field has a 100% width. See the attached screenshot.