tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bootstrap-styled select2, fixes

Browse Source
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
lib
select2-bootstrap.css
select2.js

91
src/inputs/select2/lib/select2-bootstrap.css vendored Normal file

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

4
src/inputs/select2/select2.js vendored

@ -6,6 +6,10 @@ You should manually include select2 distributive:
<link href="select2/select2.css" rel="stylesheet" type="text/css"></link>
<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.
The solution is to load source manually and assign statically.