Select2 not calculating `resolved` width correctly if select is hidden
Solution 1
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"
Solution 2
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;
}
Solution 3
I solved my similar problem with simple CSS:
.select2-container {
width: 100% !important;
}
Solution 4
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.
Solution 5
Set the style property of select
element with width 100%
<select class="js-example-responsive" style="width: 100%"></select>
Related videos on Youtube
Hailwood
I could tell you all about me... but I'd prefer to let my work do the talking for me!
Updated on July 09, 2022Comments
-
Hailwood almost 2 years
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?
-
RyanFishman over 11 yearsCan you please provide a jsfiddle this way we can take a look at your problem?
-
charlietfl over 11 yearsone option is wait until element shown to initialize plugin, another is don't hide
select
but place it offscreen until needed. Demo would help -
Fabrício Matté over 11 yearsI'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'
. -
surendran over 11 yearstry adding inline width with "!important".
-
-
Cesar Bielich almost 8 yearsomg this was driving me crazy, ugh the simplest things are always overlooked. Thanks for your answer.
-
Jean-Luc Barat almost 8 yearsDoes the tricks for ajax render (without quote for width). Thanks.
-
Ceasar Bautista over 7 yearsThere's an open issue to fix this here, though at present no patch or response from the maintainer: github.com/select2/select2/issues/4513
-
user3620741 over 7 years$('select').select2({ width: 'auto' });
-
danielricecodes about 7 yearsThis is by far the best answer. Easiest to implement also.
-
ni8mr about 7 yearsIt 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.
-
Harry Bosh over 6 yearsThis interferes with other select boxes negativley in my instance
-
DomQ over 6 yearsIn 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!
-
Yevgeniy Afanasyev about 6 yearsYou are very welcome. Did you notice any difference between Firefox and Chrome?
-
Max Cuttins about 6 yearsTHIS 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.
-
Nguyen Tan Dat almost 6 yearsThis definitely works, but may I know what makes this issue?
-
Mischa over 4 yearsThis works for the select, but not for the placeholder inside. If there is a long placeholder, it gets cut off
-
Raiika almost 2 yearsin 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 <body> width which causes an overflow width –