select2-bootstrap-css
Version:
Simple CSS to make Select2 widgets fit in with Bootstrap
490 lines (444 loc) • 18.2 kB
HTML
<html class="demo">
{% include head.html %}
<body>
{% include navbar.html %}
<div class="form-group">
<label for="default" class="control-label">Default textbox</label>
<input id="default" type="text" class="form-control" placeholder="Placeholder text">
</div>
<div class="form-group">
<label for="single" class="control-label">Select2 single select</label>
<select id="single" class="form-control select2">
<option></option>
{% include select2-select.html %}
</select>
</div>
<div class="form-group">
<label for="multiple" class="control-label">Select2 multi select</label>
<select id="multiple" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
<div class="page-header">
<h3>Input Groups <small><a href="http://getbootstrap.com/components/#input-groups" ><span class="glyphicon glyphicon-link"></span></a></small></h3>
</div>
<p>To let the Select2-widget know if any elements are directly being appended, prepended or both in the context of a Bootstrap input group, add <code>.select2-bootstrap-prepend</code> and/or <code>.select2-bootstrap-append</code> to the <code>.input-group</code> wrapper element to address the corresponding border-radii.</p>
<div class="form-group">
<label for="select2-single-append" class="control-label">Select2 append Checkbox</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="form-group">
<label for="single-append-radio" class="control-label">Select2 multi append Radiobutton</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="radio">
</span>
<select id="single-append-radio" class="form-control select2-allow-clear" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="form-group">
<label for="single-append-text" class="control-label">Select2 append</label>
<div class="input-group select2-bootstrap-append">
<select id="single-append-text" class="form-control select2-allow-clear">
<option></option>
{% include select2-select.html %}
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="single-append-text">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<label for="single-prepend-text" class="control-label">Select2 prepend</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="single-prepend-text">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<select id="single-prepend-text" class="form-control select2">
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
<div class="form-group">
<label for="multi-append" class="control-label">Select2 multi append</label>
<div class="input-group select2-bootstrap-append">
<select id="multi-append" class="form-control select2" multiple>
<option></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="multi-append">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<label for="multi-prepend" class="control-label">Select2 multi prepend</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="multi-prepend">
State
</button>
</span>
<select id="multi-prepend" class="form-control select2" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
<div class="container">
<div class="page-header">
<h3>
Control sizing <small><a href="http://getbootstrap.com/css/#forms-control-sizes"><span class="glyphicon glyphicon-link"></span></a></small>
</h3>
</div>
<div class="row">
<div class="col-md-4">
<label for="select2-multiple-input-sm" class="control-label">col-md-4</label>
<select id="select2-multiple-input-sm" class="form-control input-sm select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
<div class="col-md-3">
<label for="select2-single-input-sm" class="control-label">col-md-3</label>
<select id="select2-single-input-sm" class="form-control input-sm select2-multiple">
{% include select2-select.html %}
</select>
</div>
<div class="col-md-2">
<label for="bootstrap-input-sm" class="control-label">Bootstrap input</label>
<input id="bootstrap-input-sm" class="form-control input-sm" placeholder=".input-sm">
</div>
<div class="col-md-3">
<div class="form-group has-success">
<label for="select2-single-input-group-sm" class="control-label">col-md-3</label>
<div class="input-group input-group-sm select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="radio">
</span>
<select id="select2-single-input-group-sm" class="form-control select2">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 has-warning">
<label for="select2-multiple" class="control-label">col-md-4</label>
<select id="select2-multiple" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="col-md-3">
<label for="span_small" class="control-label">col-md-3</label>
<select id="span_small" class="form-control select2">
{% include select2-select.html %}
</select>
</div>
<div class="col-md-2">
<label for="span-medium">Bootstrap input</label>
<input id="span-medium" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<div class="form-group">
<label for="span_large" class="control-label">col-md-3</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="span_large" class="form-control select2">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<label for="select2-multiple-input-lg" class="control-label">col-md-4</label>
<select id="select2-multiple-input-lg" class="form-control input-lg select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
<div class="col-md-3">
<label for="span-small" class="control-label">col-md-3</label>
<select id="span-small" class="form-control input-lg select2-multiple">
{% include select2-select.html %}
</select>
</div>
<div class="col-md-2">
<label for="bootstrap-input-lg" class="control-label">Bootstrap input</label>
<input id="bootstrap-input-lg" class="form-control input-lg" placeholder=".input-lg">
</div>
<div class="col-md-3">
<div class="form-group has-error">
<label for="select2-multiple-input-group-lg" class="control-label">col-md-3</label>
<div class="input-group input-group-lg select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="radio">
</span>
<select id="select2-multiple-input-group-lg" class="form-control select2">
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
<div class="page-header">
<h3>
Button Addons <small><a href="http://getbootstrap.com/components/#input-groups-buttons"><span class="glyphicon glyphicon-link"></span></a></small>
</h3>
</div>
<div class="row">
<div class="col-md-7">
<label for="select2-button-addons-single-input-group-sm" class="control-label">Select2 custom data load</label>
<div class="input-group input-group-sm select2-bootstrap-prepend">
<div class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-sm">
State
</button>
</div>
<input id="select2-button-addons-single-input-group-sm" type="hidden" class="form-control select2-remote">
</div>
</div>
<div class="col-md-5">
<label for="select2-button-addons-multiple-input-group-sm" class="control-label">col-md-5</label>
<div class="input-group input-group-sm select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multiple-input-group-sm">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<select id="select2-button-addons-multiple-input-group-sm" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<label for="select2-button-addons-single-input-group" class="control-label">Select2 custom data load</label>
<div class="input-group select2-bootstrap-prepend">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input id="select2-button-addons-single-input-group" type="hidden" class="form-control select2-remote">
</div>
</div>
<div class="col-md-5">
<label for="select2-input-group-append" class="control-label">col-md-5</label>
<div class="input-group has-warning select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="select2-input-group-append">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<select id="select2-input-group-append" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-7">
<label for="select2-button-addons-single-input-group-lg" class="control-label">Select2 custom data load</label>
<div class="input-group input-group-lg select2-bootstrap-append">
<input id="select2-button-addons-single-input-group-lg" type="hidden" class="form-control select2-remote" value="1296269">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-single-input-group-lg">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="col-md-5">
<label for="select2-button-addons-multi-input-group-lg" class="control-label">col-md-5</label>
<div class="input-group input-group-lg select2-bootstrap-prepend">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-select2-open="select2-button-addons-multi-input-group-lg">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<select id="select2-button-addons-multi-input-group-lg" class="form-control select2-multiple" multiple>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<div class="page-header">
<h3>Disabled inputs <small><a href="http://getbootstrap.com/css/#forms-control-states"><span class="glyphicon glyphicon-link"></span></a></small></h3>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="select2-disabled-inputs-single" class="control-label">col-md-3</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox">
</span>
<select id="select2-disabled-inputs-single" class="form-control select2" disabled>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="select2-disabled-inputs-multiple" class="control-label">col-md-3</label>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-disabled-inputs-multiple" class="form-control select2-multiple" multiple>
<option></option>
{% include select2-select.html %}
</select>
</div>
</div>
</div>
</div>
</div>
{% include footer.html %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//select2.github.io/select2/select2-{{ page.version }}/select2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var placeholder = "Select a State";
$( ".select2, .select2-multiple" ).select2( { placeholder: placeholder } );
$( ".select2-allow-clear" ).select2( { allowClear: true, placeholder: placeholder } );
// @see https://github.com/ivaynberg/select2/commit/6661e3
function repoFormatResult( repo ) {
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if ( repo.description ) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><span class='glyphicon glyphicon-flash'></span> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><span class='glyphicon glyphicon-star'></span> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><span class='glyphicon glyphicon-eye-open'></span> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function repoFormatSelection( repo ) {
return repo.full_name;
}
$( ".select2-remote" ).select2({
placeholder: "Search for a GitHub Repository",
minimumInputLength: 1,
// instead of writing the function to execute the request we use Select2's convenient helper
ajax: {
url: "https://api.github.com/search/repositories",
dataType: "json",
quietMillis: 250,
data: function( term, page ) {
return {
// search term
q: term
};
},
results: function( data, page ) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter the remote JSON data
return { results: data.items };
},
cache: true
},
initSelection: function( element, callback ) {
// the input tag has a value attribute preloaded that points to a preselected repository's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the repository name is shown preselected
var id = $( element ).val();
if ( id !== "" ) {
$.ajax( "https://api.github.com/repositories/" + id, {
dataType: "json"
}).done( function( data ) {
callback( data );
});
}
},
formatResult: repoFormatResult,
formatSelection: repoFormatSelection,
// apply css that makes the dropdown taller
dropdownCssClass: "bigdrop",
// we do not want to escape markup since we are displaying html in results
escapeMarkup: function( m ) {
return m;
}
});
$( "button[data-select2-open]" ).click( function() {
$( "#" + $( this ).data( "select2-open" ) ).select2( "open" );
});
{% if page.version == "3.3.2" %}
var select2OpenEventName = "open";
$( ":checkbox" ).on( "click", function() {
if ( this.checked ) {
var toggleState = "enable";
} else {
var toggleState = "disable";
}
$( this ).parent().nextAll( "select" ).select2( toggleState );
});
{% else %}
var select2OpenEventName = "select2-open";
$( ":checkbox" ).on( "click", function() {
$( this ).parent().nextAll( "select" ).select2( "enable", this.checked );
});
{% endif %}
$( ".select2, .select2-multiple, .select2-allow-clear, .select2-remote" ).on( select2OpenEventName, function() {
if ( $( this ).parents( "[class*='has-']" ).length ) {
var classNames = $( this ).parents( "[class*='has-']" )[ 0 ].className.split( /\s+/ );
for ( var i = 0; i < classNames.length; ++i ) {
if ( classNames[ i ].match( "has-" ) ) {
$( "#select2-drop" ).addClass( classNames[ i ] );
}
}
}
});
</script>
</body>
</html>