Skip to content

Commit b5f136f

Browse files
authored
Add computedstyle option for calculating the width (select2#5559)
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 select2#3278 Fixes select2#5502 Closes select2#5259
1 parent f9decd6 commit b5f136f

2 files changed

Lines changed: 24 additions & 0 deletions

File tree

src/js/select2/core.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,12 @@ define([
162162
return null;
163163
}
164164

165+
if (method == 'computedstyle') {
166+
var computedStyle = window.getComputedStyle($element[0]);
167+
168+
return computedStyle.width;
169+
}
170+
165171
return method;
166172
};
167173

tests/options/width-tests.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,21 @@ test('resolve falls back to element if there is no style', function (assert) {
6464

6565
assert.equal(width, '500px');
6666
});
67+
68+
test('computedstyle gets the style if parent is invisible', function (assert) {
69+
var $style = $(
70+
'<style type="text/css">.css-set-width { width: 500px; }</style>'
71+
);
72+
var $test = $(
73+
'<div style="display:none;">' +
74+
'<select class="css-set-width"></select>' +
75+
'</div>'
76+
);
77+
78+
$('#qunit-fixture').append($style);
79+
$('#qunit-fixture').append($test);
80+
81+
var width = select._resolveWidth($test.find('select'), 'computedstyle');
82+
83+
assert.equal(width, '500px');
84+
});

0 commit comments

Comments
 (0)