0

I've created a multiple select at the document ready with jQuery (.select2() function). The select works well, it has been created correctly, but the placeholder shows only a few chars. When I put in some data, and then I reset with the clear button, the placeholder is correctly shown. How can I fix this?

[This is my select with truncated placeholder at document ready]

enter image description here

[and here you can find the select with the right placeholder]

enter image description here

This is the jquery code:

$('#myselect').select2({
    multiple: true,
    allowClear: true,
    placeholder: Translator.trans('label.pleaseSelect')
});

and this is my HTML

<select class="form-control" name="myName" id="myselect" style="width: 100% !important;" multiple>
<option></option>
{% for field in data.fields %}
<option value="{{ field['id'] }}" >{{ field['description'] }}</option>
{% endfor %}
</select>

Thanks for helping !

jishan siddique
  • 1,848
  • 2
  • 12
  • 23
Heartbeatl
  • 27
  • 5
  • That looks like the input is simply not wide enough to fit the entire `placeholder` text in. Have you tried just making it wider by default in CSS? – Rory McCrossan Apr 28 '20 at 10:57
  • i've forgot to post the html code (i added it to the main post right now), but yes, i've added a style with width 100% in the HTML. Is that what u mean ? Is that right ? – Heartbeatl Apr 28 '20 at 11:04
  • Not quite, that's 100% width on the select which gets hidden. You need to put it on the element which Select2 dynamically creates – Rory McCrossan Apr 28 '20 at 11:05
  • I've made many tries considering what you told me. In the end I've find out a solution that worked for me: .select2-search__field { width: 100% !important; } – Heartbeatl Apr 28 '20 at 12:25

2 Answers2

2

I've made many tries considering what Rory McCrossan tolds me. In the end I've find out a solution that worked for me: 

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

Many thanks !

Heartbeatl
  • 27
  • 5
1

This alternative CSS-only solution worked for me:

https://stackoverflow.com/a/59953451/3087844

My instance is deployed under WordPress, using Select2 v 4.0.13 and jQuery v 1.12.4.

Morris
  • 218
  • 1
  • 10