Skip to content

Commit

Permalink
Add computedstyle option for calculating the width (#5559)
Browse files Browse the repository at this point in the history
This allows for more accurate resolution of the width when compared
to the `resolve` method. This is more relevant for jQuery 1.x, where
the `resolve` method cannot find the width of a hidden select box,
but it also applies to newer versions of jQuery where the `width()`
method provided by jQuery doesn't fully match `getComputedStyle()`.

Fixes #3278
Fixes #5502
Closes #5259
  • Loading branch information
kevin-brown committed Jul 9, 2019
1 parent f9decd6 commit b5f136f
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/js/select2/core.js
Expand Up @@ -162,6 +162,12 @@ define([
return null;
}

if (method == 'computedstyle') {
var computedStyle = window.getComputedStyle($element[0]);

return computedStyle.width;
}

return method;
};

Expand Down
18 changes: 18 additions & 0 deletions tests/options/width-tests.js
Expand Up @@ -64,3 +64,21 @@ test('resolve falls back to element if there is no style', function (assert) {

assert.equal(width, '500px');
});

test('computedstyle gets the style if parent is invisible', function (assert) {
var $style = $(
'<style type="text/css">.css-set-width { width: 500px; }</style>'
);
var $test = $(
'<div style="display:none;">' +
'<select class="css-set-width"></select>' +
'</div>'
);

$('#qunit-fixture').append($style);
$('#qunit-fixture').append($test);

var width = select._resolveWidth($test.find('select'), 'computedstyle');

assert.equal(width, '500px');
});

0 comments on commit b5f136f

Please sign in to comment.