Permalink
Browse files

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

  • Loading branch information...
1 parent 0cb2866 commit bcf1136f2c8236cd3fa28eac7e57a9a3fc17d104 @mdo mdo committed Jan 7, 2012
Showing with 136 additions and 140 deletions.
  1. +54 −101 bootstrap.css
  2. +26 −17 bootstrap.min.css
  3. +5 −1 docs/assets/css/docs.css
  4. +9 −0 docs/base-css.html
  5. +42 −21 lib/forms.less
View
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Jan 7 00:29:11 PST 2012
+ * Date: Sat Jan 7 00:47:37 PST 2012
*/
html, body {
margin: 0;
@@ -601,8 +601,10 @@ select, input[type=file] {
line-height: 27px;
}
select {
- background-color: #ffffff;
+ width: 220px;
+ padding: 0;
vertical-align: middle;
+ background-color: #ffffff;
}
select[multiple], select[size] {
height: inherit;
@@ -673,133 +675,84 @@ input[type=file]:focus, input[type=checkbox]:focus, select:focus {
.input-xxlarge {
width: 530px;
}
-input.span1,
-textarea.span1,
-select.span1,
-.uneditable-input.span1 {
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"] {
float: none;
- width: 50px;
margin-left: 0;
}
-input.span2,
-textarea.span2,
-select.span2,
-.uneditable-input.span2 {
- float: none;
+input.span1, textarea.span1, .uneditable-input.span1 {
+ width: 50px;
+}
+input.span2, textarea.span2, .uneditable-input.span2 {
width: 130px;
- margin-left: 0;
}
-input.span3,
-textarea.span3,
-select.span3,
-.uneditable-input.span3 {
- float: none;
+input.span3, textarea.span3, .uneditable-input.span3 {
width: 210px;
- margin-left: 0;
}
-input.span4,
-textarea.span4,
-select.span4,
-.uneditable-input.span4 {
- float: none;
+input.span4, textarea.span4, .uneditable-input.span4 {
width: 290px;
- margin-left: 0;
}
-input.span5,
-textarea.span5,
-select.span5,
-.uneditable-input.span5 {
- float: none;
+input.span5, textarea.span5, .uneditable-input.span5 {
width: 370px;
- margin-left: 0;
}
-input.span6,
-textarea.span6,
-select.span6,
-.uneditable-input.span6 {
- float: none;
+input.span6, textarea.span6, .uneditable-input.span6 {
width: 450px;
- margin-left: 0;
}
-input.span7,
-textarea.span7,
-select.span7,
-.uneditable-input.span7 {
- float: none;
+input.span7, textarea.span7, .uneditable-input.span7 {
width: 530px;
- margin-left: 0;
}
-input.span8,
-textarea.span8,
-select.span8,
-.uneditable-input.span8 {
- float: none;
+input.span8, textarea.span8, .uneditable-input.span8 {
width: 610px;
- margin-left: 0;
}
-input.span9,
-textarea.span9,
-select.span9,
-.uneditable-input.span9 {
- float: none;
+input.span9, textarea.span9, .uneditable-input.span9 {
width: 690px;
- margin-left: 0;
}
-input.span10,
-textarea.span10,
-select.span10,
-.uneditable-input.span10 {
- float: none;
+input.span10, textarea.span10, .uneditable-input.span10 {
width: 770px;
- margin-left: 0;
}
-input.span11,
-textarea.span11,
-select.span11,
-.uneditable-input.span11 {
- float: none;
+input.span11, textarea.span11, .uneditable-input.span11 {
width: 850px;
- margin-left: 0;
}
-input.span12,
-textarea.span12,
-select.span12,
-.uneditable-input.span12 {
- float: none;
+input.span12, textarea.span12, .uneditable-input.span12 {
width: 930px;
- margin-left: 0;
}
-input.span13,
-textarea.span13,
-select.span13,
-.uneditable-input.span13 {
- float: none;
- width: 1010px;
- margin-left: 0;
+select.span1 {
+ width: 70px;
}
-input.span14,
-textarea.span14,
-select.span14,
-.uneditable-input.span14 {
- float: none;
- width: 1090px;
- margin-left: 0;
+select.span2 {
+ width: 150px;
}
-input.span15,
-textarea.span15,
-select.span15,
-.uneditable-input.span15 {
- float: none;
- width: 1170px;
- margin-left: 0;
+select.span3 {
+ width: 230px;
}
-input.span16,
-textarea.span16,
-select.span16,
-.uneditable-input.span16 {
- float: none;
- width: 1250px;
- margin-left: 0;
+select.span4 {
+ width: 310px;
+}
+select.span5 {
+ width: 390px;
+}
+select.span6 {
+ width: 470px;
+}
+select.span7 {
+ width: 550px;
+}
+select.span8 {
+ width: 630px;
+}
+select.span9 {
+ width: 710px;
+}
+select.span10 {
+ width: 790px;
+}
+select.span11 {
+ width: 870px;
+}
+select.span12 {
+ width: 950px;
}
input[disabled],
select[disabled],
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -456,7 +456,11 @@ form.well {
outline: 0;
}
-
+/* For input sizes, make them display block */
+.docs-input-sizes input[type=text] {
+ display: block;
+ margin-bottom: 9px;
+}
/* Icons
------------------------- */
View
@@ -1025,6 +1025,15 @@
<form class="horizontal-form">
<legend>Extending form controls</legend>
<fieldset class="control-group">
+ <label class="control-label">Form sizes</label>
+ <div class="controls docs-input-sizes">
+ <input class="span2" type="text" name="" placeholder=".span2">
+ <input class="span3" type="text" name="" placeholder=".span3">
+ <input class="span4" type="text" name="" placeholder=".span4">
+ <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
+ </div>
+ </fieldset>
+ <fieldset class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
View
@@ -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); }
}

0 comments on commit bcf1136

Please sign in to comment.