github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-30 16:48:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix form field sizing for selects, document form field grid sizing

Browse Source
This commit is contained in:
Mark Otto
2012-01-07 00:47:53 -08:00
parent 0cb2866409
commit bcf1136f2c
5 changed files with 136 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
lib/forms.less
View File

@@ -96,8 +96,10 @@ input[type=file] {
// Chrome on Linux and Mobile Safari need background-color
select {
background-color: @white;
width: 220px; // default input width + 10px of padding that doesn't get applied
padding: 0;
vertical-align: middle;
background-color: @white;
}
// Make multiple select elements height not fixed
@@ -187,33 +189,52 @@ select:focus {
.input-xxlarge { width: 530px; }
// Grid style input sizes
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.formColumns(@columnSpan: 1) {
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"] {
float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
margin-left: 0;
}
// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
.inputColumns(@columnSpan: 1) {
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
}
input,
textarea,
select,
.uneditable-input {
// Default columns
&.span1 { .formColumns(1); }
&.span2 { .formColumns(2); }
&.span3 { .formColumns(3); }
&.span4 { .formColumns(4); }
&.span5 { .formColumns(5); }
&.span6 { .formColumns(6); }
&.span7 { .formColumns(7); }
&.span8 { .formColumns(8); }
&.span9 { .formColumns(9); }
&.span10 { .formColumns(10); }
&.span11 { .formColumns(11); }
&.span12 { .formColumns(12); }
&.span13 { .formColumns(13); }
&.span14 { .formColumns(14); }
&.span15 { .formColumns(15); }
&.span16 { .formColumns(16); }
&.span1 { .inputColumns(1); }
&.span2 { .inputColumns(2); }
&.span3 { .inputColumns(3); }
&.span4 { .inputColumns(4); }
&.span5 { .inputColumns(5); }
&.span6 { .inputColumns(6); }
&.span7 { .inputColumns(7); }
&.span8 { .inputColumns(8); }
&.span9 { .inputColumns(9); }
&.span10 { .inputColumns(10); }
&.span11 { .inputColumns(11); }
&.span12 { .inputColumns(12); }
}
.selectColumns(@columnSpan: 1) {
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
}
select {
&.span1 { .selectColumns(1); }
&.span2 { .selectColumns(2); }
&.span3 { .selectColumns(3); }
&.span4 { .selectColumns(4); }
&.span5 { .selectColumns(5); }
&.span6 { .selectColumns(6); }
&.span7 { .selectColumns(7); }
&.span8 { .selectColumns(8); }
&.span9 { .selectColumns(9); }
&.span10 { .selectColumns(10); }
&.span11 { .selectColumns(11); }
&.span12 { .selectColumns(12); }
}