Select2 not calculating `resolved` width correctly if select is hidden

Question

I am using Twitter bootstrap and the fantastic Select2 plugin.

These are working great, I realized you need to set {width: 'resolve'} when initiating Select2 otherwise it looks messed up!.

But I am having an issue with one of my selects, as you can see in the image below, the Referee Type select has an incorrect width.

This is caused due to this field being initially hidden, and only becoming visible if Referee is selected in the Group field.

So, how can I fix this?

Inputs

Can you please provide a jsfiddle this way we can take a look at your problem? — RyanFishman, Jan 14 '13 at 03:43
one option is wait until element shown to initialize plugin, another is don't hide `select` but place it offscreen until needed. Demo would help — charlietfl, Jan 14 '13 at 03:50
I've been using select2 for a while and I usually set the width inline in the element style in the HTML - I know it is not very good practice but Select2 will attempt to copy the element style's width prior to resolving its actual dimensions so it is worth a shot. In that case you can remove `width: 'resolve'`. — Fabrício Matté, Jan 14 '13 at 04:22

Yevgeniy Afanasyev · Answer 1 · 2020-01-29T07:23:54.917

36

Select 2 is smart enough to recalculate it's size if only you set it in the select tag. Like so:

<select style="width: 100%"></select>

CSS formatting on classes would not work!

Read more in "Responsive design - Percent width"

edited Jan 29 '20 at 07:23

answered Jan 14 '16 at 01:41

Yevgeniy Afanasyev

37,872
26
173
191

In addition to saying that this is the only correct answer, I feel like adding that the behavior is different between Firefox and Chrome for some reason. Kudos anyway! – DomQ Jan 18 '18 at 13:48
You are very welcome. Did you notice any difference between Firefox and Chrome? – Yevgeniy Afanasyev Feb 22 '18 at 22:00
This definitely works, but may I know what makes this issue? – Nguyen Tan Dat May 28 '18 at 10:36
This works for the select, but not for the placeholder inside. If there is a long placeholder, it gets cut off – Mischa Dec 02 '19 at 10:21

score 20 · Answer 2 · answered Apr 19 '13 at 05:20

20

You can set the width in the <select> element like so:

<select style="width:260px">

Until you find the desired width that you're looking for. In fact, the examples on the official select2 plugin site are done in this way.

However, if you're intent upon staying away from inline styles, you can always simply override select2's CSS and target the resulting container.

.select2-container {
  width: 260px;
}

answered Apr 19 '13 at 05:20

brianrhea

3,674
3
34
57

omg this was driving me crazy, ugh the simplest things are always overlooked. Thanks for your answer. – Cesar Bielich Jun 03 '16 at 05:36

score 20 · Answer 3 · answered Aug 02 '16 at 09:53

20

I solved my similar problem with simple CSS:

.select2-container {
    width: 100% !important;
}

answered Aug 02 '16 at 09:53

NMC

1,210
10
14

1

This is by far the best answer. Easiest to implement also. – danielricecodes Apr 14 '17 at 15:54
1

It works for all cases (if element is hidden within a hidden parent and also if the element itself is hidden). No need to check any external cases. – ni8mr May 15 '17 at 10:39
This interferes with other select boxes negativley in my instance – Harry Bosh Aug 21 '17 at 02:56
in my case, this causes me a vertical scroll because the span is not in the very left of the monitor and it's taking 100% of the width which causes an overflow width – – Raiika May 26 '22 at 08:03

score 8 · Answer 4 · answered Jul 19 '13 at 09:22

8

Instead of invoking select2() on the Referee Type when the page loads, invoke select2 after showing Referee Type for the first time. This way, the select will be visible (with a proper width), and the 'width': 'resolve' option should work. If you provide a small jsfiddle example it would be easier to point this out.

answered Jul 19 '13 at 09:22

dyve

5,893
2
30
44

Does the tricks for ajax render (without quote for width). Thanks. – Jean-Luc Barat Jul 27 '16 at 18:11
1

THIS IS THE RIGHT ANSWER! :) My Select2 was working properly till I don't move to a hidden TAB. From that point width of Select2 was reduced to the selected value. This is just a BUG, the workaround is to display:block/declare Select2 /display:none during page ready. – Max Cuttins May 18 '18 at 08:11

JwJosefy · Answer 5 · 2017-03-10T17:35:22.717

6

Set the style property of select element with width 100%

<select class="js-example-responsive" style="width: 100%"></select>

See Responsive design - Percent width

edited Mar 10 '17 at 17:35

answered Jan 29 '15 at 03:14

JwJosefy

730
7
12

score 3 · Answer 6 · edited May 06 '19 at 23:15

3

.select2-container {
  width: 100% !important;
}

edited May 06 '19 at 23:15

mechnicov

12,025
4
33
56

answered Dec 17 '18 at 06:31

Omid Ahmadyani

1,430
13
15

score 2 · Answer 7 · answered Jan 10 '14 at 09:50

2

Execute this when you unhide controls with Select2 attached:

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();

answered Jan 10 '14 at 09:50

BertrandJ

29
4

score 2 · Answer 8 · answered May 17 '18 at 12:44

You could bind a click event to the element that opens you hidden element and set the select2 width there. Worked for me and it's pretty simple. I used the click event because doing it with just 'document ready' wasn't working.

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }

score 0 · Answer 9 · answered Dec 11 '15 at 05:42

My preferred solution is to stop select2 from assigning those width and let them be automatic. Comment the following in select2.full.js :

For Container:

  Select2.prototype._placeContainer = function ($container) {
    $container.insertAfter(this.$element);

      //##!!
      /*
    var width = this._resolveWidth(this.$element, this.options.get('width'));

    if (width != null) {
      $container.css('width', width);
    }*/
  };

For Search inside the container:

  Search.prototype.resizeSearch = function () {

    //##!!
    /*
    this.$search.css('width', '25px');

    var width = '';

    if (this.$search.attr('placeholder') !== '') {
      width = this.$selection.find('.select2-selection__rendered').innerWidth();
    } else {
      var minimumWidth = this.$search.val().length + 1;

      width = (minimumWidth * 0.75) + 'em';
    }

    this.$search.css('width', width);
    */
  };

  return Search;
});

There's an open issue to fix this here, though at present no patch or response from the maintainer: https://github.com/select2/select2/issues/4513 — Ceasar, Nov 09 '16 at 01:08

score 0 · Answer 10 · answered Jan 21 '22 at 07:14

According to documentation, you could add the proper width to settings on initialization:

$(".js-example-responsive").select2({
    width: '100%' // or 'resolve' or 'style' or 'element' - see docs
});

Worked like a charm for me while other recipes didn't help.

score -1 · Answer 11 · answered Aug 21 '17 at 02:57

-1

hack to make it work is to run:

$('.filter-modal select').css('width', '100%'); before $('select').select2().

https://github.com/select2/select2/issues/4269

answered Aug 21 '17 at 02:57

Harry Bosh

3,611
2
36
34

score -1 · Answer 12 · edited May 06 '19 at 21:19

-1

This worked for me

.select2-container  {
    width: 100% !important;
}

also a fixed width

.select2-container  {
    width: 300px !important;
}

edited May 06 '19 at 21:19

johnnyRose

7,310
17
40
61

answered Apr 13 '18 at 15:36

Jam

197
2
14

score -1 · Answer 13 · answered May 18 '18 at 08:27

Select2 has a strange bug which not "resolve" in the correct way hidden Select2 elements. It's not working place width: "resolve" as this is already the default value. Instead the workaround is to show the select2 and hide them suddenly a second later the declaration.

$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness

This will render correctly the select2.

score -2 · Answer 14 · answered Jun 09 '16 at 13:06

-2

$("span.select2").css("width", "100%");

answered Jun 09 '16 at 13:06

Ebad ghafoory

1,332
3
14
25

Select2 not calculating `resolved` width correctly if select is hidden

14 Answers14