bootstrap-styled select2, fixes

This commit is contained in:
vitalets
2013-04-07 20:15:44 +04:00
parent 70c7374125
commit 388780cfcd
2 changed files with 95 additions and 0 deletions
src/inputs/select2

@ -0,0 +1,91 @@
.select2-container {
vertical-align:middle;
}
.select2-container .select2-choice {
border:1px solid #ccc;
height:28px;
border-radius: 3px;
line-height: 29px;
background-image:none;
filter:none;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.select2-container .select2-choice div {
border-left:none;
background:none;
background-image:none;
filter:none;
}
.select2-container-multi .select2-choices {
border:1px solid #ccc;
border-radius: 3px;
background-image:none;
filter:none;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.error .select2-container-multi .select2-choices {
border-color:#B94A48;
}
.control-group.error .select2-container .select2-choice {
border-color:#B94A48;
}
.select2-container-multi .select2-choices .select2-search-field {
height:28px;
line-height: 27px;
}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices,
.select2-container-multi.select2-container-active .select2-choices {
border-color: rgba(82, 168, 236, 0.8);
outline: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.input-append .select2-container, .input-prepend .select2-container {
font-size:14px;
}
.input-prepend .select2-container > a.select2-choice,
.input-prepend .select2-container-multi .select2-choices {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.input-append .select2-container > a,
.input-append .select2-container-multi .select2-choices {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.input-prepend .select2-container > a.select2-choice > div,
.input-append .select2-container > a.select2-choice > div {
display:none;
}
.input-append .select2-offscreen,
.input-prepend .select2-offscreen {
position: absolute;
}
/**
* This stops the quick flash when a native selectbox is shown and
* then replaced by a select2 input when javascript kicks in. This can be
* removed if javascript is not present
*/
select.select2 {
height:28px;
visibility:hidden;
}

@ -6,6 +6,10 @@ You should manually include select2 distributive:
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link> <link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
<script src="select2/select2.js"></script> <script src="select2/select2.js"></script>
For make it **Bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css):
<link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>
**Note:** currently `ajax` source for select2 is not supported, as it's not possible to load it in closed select2 state. **Note:** currently `ajax` source for select2 is not supported, as it's not possible to load it in closed select2 state.
The solution is to load source manually and assign statically. The solution is to load source manually and assign statically.