Skip to content

Commit af1f351

Browse files
kevin-brownkevin-brown
committed
Added back the width option
In past versions of Select2, the `width` option could be used to tell Select2 how to determine the width of the container generated by Select2. **Breaking change:** The default value for the `width` option has been changed from `copy` to `resolve.` **Breaking change:** The old option called `copy` has been renamed to `style` to better reflect what the width is generated from. This fixes select2#2090. This fixes select2#2911.
1 parent ff596e6 commit af1f351

11 files changed

Lines changed: 410 additions & 17 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3619,7 +3619,8 @@ define('select2/defaults',[
36193619
templateSelection: function (selection) {
36203620
return selection.text;
36213621
},
3622-
theme: 'default'
3622+
theme: 'default',
3623+
width: 'resolve'
36233624
};
36243625
};
36253626

@@ -3868,7 +3869,57 @@ define('select2/core',[
38683869

38693870
Select2.prototype._placeContainer = function ($container) {
38703871
$container.insertAfter(this.$element);
3871-
$container.width(this.$element.outerWidth(false));
3872+
3873+
var width = this._resolveWidth(this.$element, this.options.get('width'));
3874+
3875+
if (width != null) {
3876+
$container.css('width', width);
3877+
}
3878+
};
3879+
3880+
Select2.prototype._resolveWidth = function ($element, method) {
3881+
var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i;
3882+
3883+
if (method == 'resolve') {
3884+
var styleWidth = this._resolveWidth($element, 'style');
3885+
3886+
if (styleWidth != null) {
3887+
return styleWidth;
3888+
}
3889+
3890+
return this._resolveWidth($element, 'element');
3891+
}
3892+
3893+
if (method == 'element') {
3894+
var elementWidth = $element.outerWidth(false);
3895+
3896+
if (elementWidth <= 0) {
3897+
return 'auto';
3898+
}
3899+
3900+
return elementWidth + 'px';
3901+
}
3902+
3903+
if (method == 'style') {
3904+
var style = $element.attr('style');
3905+
3906+
if (typeof(style) !== 'string') {
3907+
return null;
3908+
}
3909+
3910+
var attrs = style.split(';');
3911+
3912+
for (i = 0, l = attrs.length; i < l; i = i + 1) {
3913+
attr = attrs[i].replace(/\s/g, '');
3914+
var matches = attr.match(WIDTH);
3915+
3916+
if (matches !== null && matches.length >= 1) {
3917+
return matches[1];
3918+
}
3919+
}
3920+
}
3921+
3922+
return method;
38723923
};
38733924

38743925
Select2.prototype._bindAdapters = function () {

‎dist/js/select2.amd.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3619,7 +3619,8 @@ define('select2/defaults',[
36193619
templateSelection: function (selection) {
36203620
return selection.text;
36213621
},
3622-
theme: 'default'
3622+
theme: 'default',
3623+
width: 'resolve'
36233624
};
36243625
};
36253626

@@ -3868,7 +3869,57 @@ define('select2/core',[
38683869

38693870
Select2.prototype._placeContainer = function ($container) {
38703871
$container.insertAfter(this.$element);
3871-
$container.width(this.$element.outerWidth(false));
3872+
3873+
var width = this._resolveWidth(this.$element, this.options.get('width'));
3874+
3875+
if (width != null) {
3876+
$container.css('width', width);
3877+
}
3878+
};
3879+
3880+
Select2.prototype._resolveWidth = function ($element, method) {
3881+
var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i;
3882+
3883+
if (method == 'resolve') {
3884+
var styleWidth = this._resolveWidth($element, 'style');
3885+
3886+
if (styleWidth != null) {
3887+
return styleWidth;
3888+
}
3889+
3890+
return this._resolveWidth($element, 'element');
3891+
}
3892+
3893+
if (method == 'element') {
3894+
var elementWidth = $element.outerWidth(false);
3895+
3896+
if (elementWidth <= 0) {
3897+
return 'auto';
3898+
}
3899+
3900+
return elementWidth + 'px';
3901+
}
3902+
3903+
if (method == 'style') {
3904+
var style = $element.attr('style');
3905+
3906+
if (typeof(style) !== 'string') {
3907+
return null;
3908+
}
3909+
3910+
var attrs = style.split(';');
3911+
3912+
for (i = 0, l = attrs.length; i < l; i = i + 1) {
3913+
attr = attrs[i].replace(/\s/g, '');
3914+
var matches = attr.match(WIDTH);
3915+
3916+
if (matches !== null && matches.length >= 1) {
3917+
return matches[1];
3918+
}
3919+
}
3920+
}
3921+
3922+
return method;
38723923
};
38733924

38743925
Select2.prototype._bindAdapters = function () {

‎dist/js/select2.full.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13154,7 +13154,8 @@ define('select2/defaults',[
1315413154
templateSelection: function (selection) {
1315513155
return selection.text;
1315613156
},
13157-
theme: 'default'
13157+
theme: 'default',
13158+
width: 'resolve'
1315813159
};
1315913160
};
1316013161

@@ -13403,7 +13404,57 @@ define('select2/core',[
1340313404

1340413405
Select2.prototype._placeContainer = function ($container) {
1340513406
$container.insertAfter(this.$element);
13406-
$container.width(this.$element.outerWidth(false));
13407+
13408+
var width = this._resolveWidth(this.$element, this.options.get('width'));
13409+
13410+
if (width != null) {
13411+
$container.css('width', width);
13412+
}
13413+
};
13414+
13415+
Select2.prototype._resolveWidth = function ($element, method) {
13416+
var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i;
13417+
13418+
if (method == 'resolve') {
13419+
var styleWidth = this._resolveWidth($element, 'style');
13420+
13421+
if (styleWidth != null) {
13422+
return styleWidth;
13423+
}
13424+
13425+
return this._resolveWidth($element, 'element');
13426+
}
13427+
13428+
if (method == 'element') {
13429+
var elementWidth = $element.outerWidth(false);
13430+
13431+
if (elementWidth <= 0) {
13432+
return 'auto';
13433+
}
13434+
13435+
return elementWidth + 'px';
13436+
}
13437+
13438+
if (method == 'style') {
13439+
var style = $element.attr('style');
13440+
13441+
if (typeof(style) !== 'string') {
13442+
return null;
13443+
}
13444+
13445+
var attrs = style.split(';');
13446+
13447+
for (i = 0, l = attrs.length; i < l; i = i + 1) {
13448+
attr = attrs[i].replace(/\s/g, '');
13449+
var matches = attr.match(WIDTH);
13450+
13451+
if (matches !== null && matches.length >= 1) {
13452+
return matches[1];
13453+
}
13454+
}
13455+
}
13456+
13457+
return method;
1340713458
};
1340813459

1340913460
Select2.prototype._bindAdapters = function () {

‎dist/js/select2.full.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/select2.js‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4047,7 +4047,8 @@ define('select2/defaults',[
40474047
templateSelection: function (selection) {
40484048
return selection.text;
40494049
},
4050-
theme: 'default'
4050+
theme: 'default',
4051+
width: 'resolve'
40514052
};
40524053
};
40534054

@@ -4296,7 +4297,57 @@ define('select2/core',[
42964297

42974298
Select2.prototype._placeContainer = function ($container) {
42984299
$container.insertAfter(this.$element);
4299-
$container.width(this.$element.outerWidth(false));
4300+
4301+
var width = this._resolveWidth(this.$element, this.options.get('width'));
4302+
4303+
if (width != null) {
4304+
$container.css('width', width);
4305+
}
4306+
};
4307+
4308+
Select2.prototype._resolveWidth = function ($element, method) {
4309+
var WIDTH = /^width:(([-+]?([0-9]*\.)?[0-9]+)(px|em|ex|%|in|cm|mm|pt|pc))/i;
4310+
4311+
if (method == 'resolve') {
4312+
var styleWidth = this._resolveWidth($element, 'style');
4313+
4314+
if (styleWidth != null) {
4315+
return styleWidth;
4316+
}
4317+
4318+
return this._resolveWidth($element, 'element');
4319+
}
4320+
4321+
if (method == 'element') {
4322+
var elementWidth = $element.outerWidth(false);
4323+
4324+
if (elementWidth <= 0) {
4325+
return 'auto';
4326+
}
4327+
4328+
return elementWidth + 'px';
4329+
}
4330+
4331+
if (method == 'style') {
4332+
var style = $element.attr('style');
4333+
4334+
if (typeof(style) !== 'string') {
4335+
return null;
4336+
}
4337+
4338+
var attrs = style.split(';');
4339+
4340+
for (i = 0, l = attrs.length; i < l; i = i + 1) {
4341+
attr = attrs[i].replace(/\s/g, '');
4342+
var matches = attr.match(WIDTH);
4343+
4344+
if (matches !== null && matches.length >= 1) {
4345+
return matches[1];
4346+
}
4347+
}
4348+
}
4349+
4350+
return method;
43004351
};
43014352

43024353
Select2.prototype._bindAdapters = function () {

‎dist/js/select2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/options.html‎

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -248,10 +248,70 @@ <h3 id="multiple">
248248
<dd>boolean (<code>true</code> or <code>false</code>)</dd>
249249
</dl>
250250

251-
This option will determine what the <code>SelectAdapter</code> (used by
252-
default) should use to set the value of the underlying <code>select</code>
253-
element. It will also determine if the <code>MultipleSelection</code>
254-
adapter should be used.
251+
<p>
252+
This option will determine what the <code>SelectAdapter</code> (used by
253+
default) should use to set the value of the underlying <code>select</code>
254+
element. It will also determine if the <code>MultipleSelection</code>
255+
adapter should be used.
256+
</p>
257+
258+
<h3 id="width">
259+
Container width
260+
</h3>
261+
262+
<p>
263+
Select2 will try to match the width of the original element as closely as
264+
possible. Sometimes this isn't perfect, which is what you can tell Select2
265+
how to determine the width.
266+
</p>
267+
268+
<div class="row">
269+
<div class="col-sm-8">
270+
<table class="table table-striped table-bordered">
271+
<thead>
272+
<tr>
273+
<th>Value</th>
274+
<th>Description</th>
275+
</tr>
276+
</thead>
277+
<tbody>
278+
<tr>
279+
<td><code>"element"</code></td>
280+
<td>
281+
Uses javascript to calculate the width of the source element.
282+
</td>
283+
</tr>
284+
<tr>
285+
<td><code>"style"</code></td>
286+
<td>
287+
Copies the value of the width <code>style</code> attribute set on the source element.
288+
</td>
289+
</tr>
290+
<tr>
291+
<td><code>"resolve"</code></td>
292+
<td>
293+
Tries to use <code>style</code> to determine the width, falling back to <code>element</code>.
294+
</td>
295+
</tr>
296+
<tr>
297+
<td>Anything else</td>
298+
<td>
299+
The value of the <code>width</code> option is diretly set as the width of the container.
300+
</td>
301+
</tr>
302+
</tbody>
303+
</table>
304+
</div>
305+
<div class="col-sm-4">
306+
<dl class="dl-horizontal">
307+
<dt>Key</dt>
308+
<dd><code>width</code></dd>
309+
310+
<dt>Value</dt>
311+
<dd>string</dd>
312+
</dl>
313+
</div>
314+
</div>
255315

256316
<h3 id="language">
257317
Internationalization (Language support)

0 commit comments

Comments
 (0)