CODEWITHSUNDEEP
javascriptjqueryjquery-select2
Aditya Sharma
Aditya Sharma

Reputation: 663

When using Select2, field gets too narrow when there are no options

When there are no options, the select box shrinks to too narrow width & even "No results found" appears distorted.

Refer fiddle

$('#example').select2({
    placeholder: 'Select a month'
});

<select id="example" multiple="multiple"></select>

Any solutions?

enter image description here enter image description here

Upvotes: 1

Views: 656

Answers (1)

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

Make use of the width option of select2 as follow :

$('#example').select2({
  placeholder: 'Select a month',
  width: "100%"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<select id="example" multiple="multiple"></select>

Upvotes: 6

Related Questions