Merge pull request #5 from justindujardin/jdd-sizable
Add support for flexible width select2 elements.
This commit is contained in:
Igor Vaynberg
commit
6fee67bcff
87
select2.css
87
select2.css
@ -7,12 +7,29 @@
|
||||
|
||||
}
|
||||
|
||||
.select2-container,
|
||||
.select2-drop,
|
||||
.select2-search,
|
||||
.select2-container .select2-search input{
|
||||
/*
|
||||
Force border-box so that % widths fit the parent
|
||||
container without overlap because of margin/padding.
|
||||
|
||||
More Info : http://www.quirksmode.org/css/box.html
|
||||
*/
|
||||
-moz-box-sizing: border-box; /* firefox */
|
||||
-ms-box-sizing: border-box; /* ie */
|
||||
-webkit-box-sizing: border-box; /* webkit */
|
||||
-khtml-box-sizing: border-box; /* konqueror */
|
||||
box-sizing: border-box; /* css3 */
|
||||
}
|
||||
|
||||
.select2-container .select2-choice {
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
|
||||
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
||||
background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#ffffff', GradientType = 0);
|
||||
background-image: linear-gradient(top, #eeeeee 0%, #ffffff 50%);
|
||||
@ -69,19 +86,17 @@
|
||||
border-top: 0;
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
left: 0;
|
||||
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
-o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
|
||||
z-index: 999;
|
||||
width:100%;
|
||||
margin-top:-1px;
|
||||
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
-webkit-border-radius: 0 0 4px 4px;
|
||||
-moz-border-radius: 0 0 4px 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.select2-container .select2-choice div {
|
||||
@ -116,11 +131,14 @@
|
||||
}
|
||||
|
||||
.select2-container .select2-search {
|
||||
padding: 3px 4px;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
z-index: 1010;
|
||||
min-height: 26px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.select2-container .select2-search input {
|
||||
@ -131,12 +149,21 @@
|
||||
background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
outline: 0;
|
||||
border: 1px solid #aaa;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
width:100%;
|
||||
margin:0;
|
||||
height:auto !important;
|
||||
min-height: 26px;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
|
||||
.select2-container .select2-search input.select2-active {
|
||||
@ -147,28 +174,22 @@
|
||||
background: url('spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
background: url('spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
outline: 0;
|
||||
border: 1px solid #aaa;
|
||||
font-family: sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
.select2-container-active .select2-choice,
|
||||
.select2-container-active .select2-choices {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
border: 1px solid #5897fb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-dropdown-open .select2-choice {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: 0 1px 0 #fff inset;
|
||||
-moz-box-shadow : 0 1px 0 #fff inset;
|
||||
-o-box-shadow : 0 1px 0 #fff inset;
|
||||
@ -199,7 +220,7 @@
|
||||
|
||||
/* results */
|
||||
.select2-container .select2-results {
|
||||
margin: 0 4px 4px 0;
|
||||
margin: 4px 4px 4px 0;
|
||||
padding: 0 0 0 4px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
@ -272,6 +293,19 @@
|
||||
height: 1%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-drop {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.select2-container-multi.select2-container-active .select2-choices {
|
||||
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
|
||||
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
box-shadow : 0 0 5px rgba(0,0,0,.3);
|
||||
border: 1px solid #5897fb;
|
||||
outline: none;
|
||||
}
|
||||
.select2-container-multi .select2-choices li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
@ -345,6 +379,7 @@
|
||||
height: 13px;
|
||||
font-size: 1px;
|
||||
background: url(select2.png) right top no-repeat;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-search-choice-close {
|
||||
|
||||
47
select2.js
47
select2.js
@ -1,4 +1,4 @@
|
||||
/*
|
||||
/*
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
@ -390,14 +390,11 @@
|
||||
|
||||
AbstractSelect2.prototype.alignDropdown = function () {
|
||||
this.dropdown.css({
|
||||
top: this.container.height(),
|
||||
width: this.container.outerWidth() - getSideBorderPadding(this.dropdown)
|
||||
top: this.container.height()
|
||||
});
|
||||
};
|
||||
|
||||
AbstractSelect2.prototype.open = function () {
|
||||
var width;
|
||||
|
||||
if (this.opened()) return;
|
||||
|
||||
this.container.addClass("select2-dropdown-open").addClass("select2-container-active");
|
||||
@ -614,6 +611,32 @@
|
||||
return this.opts.placeholder;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the desired width for the container element. This is
|
||||
* derived first from option `width` passed to select2, then
|
||||
* the inline 'style' on the original element, and finally
|
||||
* falls back to the jQuery calculated element width.
|
||||
*
|
||||
* @returns The width string (with units) for the container.
|
||||
*/
|
||||
AbstractSelect2.prototype.getContainerWidth = function() {
|
||||
if (this.opts.width !== undefined)
|
||||
return this.opts.width;
|
||||
|
||||
var style = this.opts.element.attr('style');
|
||||
if(style !== undefined){
|
||||
var attrs = style.split(';');
|
||||
for (var i = 0; i < attrs.length; i++) {
|
||||
var matches = attrs[i].replace(/\s/g,'')
|
||||
.match(/width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/);
|
||||
if(matches != null && matches.length >= 1)
|
||||
return matches[1];
|
||||
}
|
||||
}
|
||||
return this.opts.element.width() + 'px';
|
||||
};
|
||||
|
||||
|
||||
function SingleSelect2() {
|
||||
}
|
||||
|
||||
@ -624,7 +647,7 @@
|
||||
SingleSelect2.prototype.createContainer = function () {
|
||||
return $("<div></div>", {
|
||||
"class": "select2-container",
|
||||
"style": "width: " + this.opts.element.outerWidth() + "px"
|
||||
"style": "width: " + this.getContainerWidth()
|
||||
}).html([
|
||||
" <a href='javascript:void(0)' class='select2-choice'>",
|
||||
" <span></span><abbr class='select2-search-choice-close' style='display:none;'></abbr>",
|
||||
@ -641,18 +664,10 @@
|
||||
|
||||
SingleSelect2.prototype.open = function () {
|
||||
|
||||
var width;
|
||||
|
||||
if (this.opened()) return;
|
||||
|
||||
this.parent.open.apply(this, arguments);
|
||||
|
||||
// size the search field
|
||||
|
||||
width = this.dropdown.width();
|
||||
width -= getSideBorderPadding(this.container.find(".select2-search"));
|
||||
width -= getSideBorderPadding(this.search);
|
||||
this.search.css({width: width});
|
||||
};
|
||||
|
||||
SingleSelect2.prototype.close = function () {
|
||||
@ -777,7 +792,7 @@
|
||||
// hide the search box if this is the first we got the results and there are a few of them
|
||||
|
||||
if (initial === true) {
|
||||
this.search.toggle(data.results.length >= this.opts.minimumResultsForSearch);
|
||||
this.search.parent().toggle(data.results.length >= this.opts.minimumResultsForSearch);
|
||||
}
|
||||
|
||||
};
|
||||
@ -847,7 +862,7 @@
|
||||
MultiSelect2.prototype.createContainer = function () {
|
||||
return $("<div></div>", {
|
||||
"class": "select2-container select2-container-multi",
|
||||
"style": "width: " + this.opts.element.outerWidth() + "px"
|
||||
"style": "width: " + this.getContainerWidth()
|
||||
}).html([
|
||||
" <ul class='select2-choices'>",
|
||||
//"<li class='select2-search-choice'><span>California</span><a href="javascript:void(0)" class="select2-search-choice-close"></a></li>" ,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user