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

bootstrap.css

@@ -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],

bootstrap.min.css

@@ -101,7 +101,7 @@ input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;
 input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
 input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
 select,input[type=file]{height:27px;*margin-top:4px;line-height:27px;}
-select{background-color:#ffffff;vertical-align:middle;}
+select{width:220px;padding:0;vertical-align:middle;background-color:#ffffff;}
 select[multiple],select[size]{height:inherit;}
 input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
 textarea{height:auto;}
@@ -119,22 +119,31 @@ input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shado
 .input-large{width:210px;}
 .input-xlarge{width:270px;}
 .input-xxlarge{width:530px;}
-input.span1,textarea.span1,select.span1,.uneditable-input.span1{float:none;width:50px;margin-left:0;}
-input.span2,textarea.span2,select.span2,.uneditable-input.span2{float:none;width:130px;margin-left:0;}
-input.span3,textarea.span3,select.span3,.uneditable-input.span3{float:none;width:210px;margin-left:0;}
-input.span4,textarea.span4,select.span4,.uneditable-input.span4{float:none;width:290px;margin-left:0;}
-input.span5,textarea.span5,select.span5,.uneditable-input.span5{float:none;width:370px;margin-left:0;}
-input.span6,textarea.span6,select.span6,.uneditable-input.span6{float:none;width:450px;margin-left:0;}
-input.span7,textarea.span7,select.span7,.uneditable-input.span7{float:none;width:530px;margin-left:0;}
-input.span8,textarea.span8,select.span8,.uneditable-input.span8{float:none;width:610px;margin-left:0;}
-input.span9,textarea.span9,select.span9,.uneditable-input.span9{float:none;width:690px;margin-left:0;}
-input.span10,textarea.span10,select.span10,.uneditable-input.span10{float:none;width:770px;margin-left:0;}
-input.span11,textarea.span11,select.span11,.uneditable-input.span11{float:none;width:850px;margin-left:0;}
-input.span12,textarea.span12,select.span12,.uneditable-input.span12{float:none;width:930px;margin-left:0;}
-input.span13,textarea.span13,select.span13,.uneditable-input.span13{float:none;width:1010px;margin-left:0;}
-input.span14,textarea.span14,select.span14,.uneditable-input.span14{float:none;width:1090px;margin-left:0;}
-input.span15,textarea.span15,select.span15,.uneditable-input.span15{float:none;width:1170px;margin-left:0;}
-input.span16,textarea.span16,select.span16,.uneditable-input.span16{float:none;width:1250px;margin-left:0;}
+input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input[class*="span"]{float:none;margin-left:0;}
+input.span1,textarea.span1,.uneditable-input.span1{width:50px;}
+input.span2,textarea.span2,.uneditable-input.span2{width:130px;}
+input.span3,textarea.span3,.uneditable-input.span3{width:210px;}
+input.span4,textarea.span4,.uneditable-input.span4{width:290px;}
+input.span5,textarea.span5,.uneditable-input.span5{width:370px;}
+input.span6,textarea.span6,.uneditable-input.span6{width:450px;}
+input.span7,textarea.span7,.uneditable-input.span7{width:530px;}
+input.span8,textarea.span8,.uneditable-input.span8{width:610px;}
+input.span9,textarea.span9,.uneditable-input.span9{width:690px;}
+input.span10,textarea.span10,.uneditable-input.span10{width:770px;}
+input.span11,textarea.span11,.uneditable-input.span11{width:850px;}
+input.span12,textarea.span12,.uneditable-input.span12{width:930px;}
+select.span1{width:70px;}
+select.span2{width:150px;}
+select.span3{width:230px;}
+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],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
 .control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48;}
 .control-group.error input,.control-group.error textarea{color:#b94a48;border-color:#ee5f5b;}.control-group.error input:focus,.control-group.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}

docs/assets/css/docs.css

@@ -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
 ------------------------- */

docs/base-css.html

@@ -1024,6 +1024,15 @@
     <div class="span8">
       <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">

lib/forms.less

@@ -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); }
 }