mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
fix form field sizing for selects, document form field grid sizing
This commit is contained in:
Mark Otto
parent
0cb2866409
commit
bcf1136f2c
155
bootstrap.css
vendored
155
bootstrap.css
vendored
@ -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;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span1, textarea.span1, .uneditable-input.span1 {
|
||||
width: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
input.span2,
|
||||
textarea.span2,
|
||||
select.span2,
|
||||
.uneditable-input.span2 {
|
||||
float: none;
|
||||
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],
|
||||
|
||||
43
bootstrap.min.css
vendored
43
bootstrap.min.css
vendored
@ -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;}
|
||||
|
||||
@ -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
|
||||
------------------------- */
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user