bootstrap-styled select2, fixes #197
This commit is contained in:
src/inputs/select2
91
src/inputs/select2/lib/select2-bootstrap.css
vendored
Normal file
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
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>
|
<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.
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user