CODEWITHSUNDEEP
jquerytwitter-bootstrap-3jquery-select2
user3714967
user3714967

Reputation: 1645

Select element 100% width bug if option with long text is selected (Select2 bootstrap theme)

I am using select2 with bootstrap 3 theme and the select2 element overflow container if option with long text is selected and width of element is 100%.

This happens only in Mozilla Firefox!!

I create an example

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

This is the code which affect on element overflow

span.select2-selection__rendered {
  white-space: nowrap;
}

Upvotes: 17

Views: 41792

Answers (5)

Arif Rahman
Arif Rahman

Reputation: 49

Add this line in your main CSS file

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

Upvotes: 1

Satish Rabari
Satish Rabari

Reputation: 71

If you are use bootstrap then it works.

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

Upvotes: 4

Mohammad Rajpura
Mohammad Rajpura

Reputation: 11

Put in jQuery:

$('.select2-container').css("width","100%");

Upvotes: 0

chemark
chemark

Reputation: 1231

Set inline style:

<select class="select2" style="width:100%">

Comment .select2-container extra css: 

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

Add 'element' width on select2 init:

$('.select2').select2({
     width: 'element',
    minimumResultsForSearch: Infinity
  });
});

Example: http://jsfiddle.net/chemark/z9sLqLbx/

If you are using bootstrap try this solution instead, adapted from a post on github:

.form-group .select2-container {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}

If you’re using an input-group instead of a form-group, then change the first line to this:

.input-group .select2-container {

Upvotes: 33

Ratto
Ratto

Reputation: 143

This works for me, using select2 together with bootstrap 4:

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

Upvotes: 14

Related Questions