Select2 inside DIV not working correctly


#1

I set up SELECT2 and am trying to use it inside a form, but it’s not dispaying correctly.
This is my HTML code:

<div class="myDivSelect input-group" id="myDivSelect">
    <span class="input-group-addon"><i class="fa fa-handshake-o"></i></span>
    <select id="select2_canal" name="select2_canal" class="select2_canal form-control"> 
    </select> 
</div>

And this is my script:

$(document).ready(function() {
$(".select2_canal").select2({
/dropdownParent: $(’.myDivSelect’),/
language: {
inputTooShort: function () {return “Debe ingresar al menos 3 caracteres”;},
minimumInputLength: function () {return “Debe ingresar al menos 3 caracteres”;},
noResults: function () {return “No se encontraron resultados”;}
},
minimumInputLength: 3,
placeholder: “Buscar canal…”,
allowClear: true,
width: “100%”,
debug: true,
ajax: {
type: “POST”,
url: “bpa-buscarcanal.php”,
delay: 500,
data: function (params) {
//console.log(params);
return {
canal: params.term
}
} ,
processResults: function (resp) {
return {
results: resp
}
}
}

        });

    }
);

The ajax part where it queries the other PHP file works ok. It also searches for data as requested, and shows the results.

But i get like 2 select boxes. I noticed that if I remove the external DIV, it works OK.
I tried with and without the dropdownParent parameter. And made lots of tests but can’t get it to work.

How do I make it work leaving the DIV as is?

Thanks a lot


#2

Can you post a screen shot of what you’re seeing?

Have you tried it in different browsers?

What version of Select2 are you using ?

The “dropdownParent” configuration option usually solves issues where the dropdown box does not display in the desired location (typically this is needed when using Select2 in a modal overlay). Is your container DIV absolutely positioned?


#3

Hello John.
I am attaching an image of how I see it.
I’m using version 4.0.0
I tried in Chrome, Edge and IE, and same thing.

As I type (at least 4 characters) it searches the database and shows the data correctly.
image

You can see there are 2 combos. The one at the top doesn’t show the search box. I think the bottom combo is the correct one. But I can’t figure out why it duplicates it.

Thanks


#4

Version 4.0.0 is very old. I believe the latest version is 4.10. You should start by upgrading to the latest version. If that doesn’t solve the problem then I will try to help you troubleshoot it further.


#5

Hi. I’ve update to 4.0.10 (not 4.10, is this correct?)

Similar thing happens. Select combo stays hidden, but select2 combo doesn’t get the style of the rest of the form, and stays “below” where it should.

image

Here is part of the code generated:

<div class="col-md-4" data-select2-id="4">
       <input id="canalUserId" name="canalUserId" type="hidden" class="form-control" value="">
        <label class="font-noraml">Canal</label>
        <div class="input-group" data-select2-id="3">
                  <span class="input-group-addon"><i class="fa fa-handshake-o"></i></span>
                             <select id="select2-canal" name="select2-canal" class="select2-canal form-control select2-hidden-accessible" data-select2-id="select2-canal" tabindex="-1" aria-hidden="true">
                                         <option value="73" data-select2-id="55">Supermercado la Familia - Durazno</option></select><span class="select2 select2-container select2-container--default select2-container--above select2-container--focus" dir="ltr" data-select2-id="1" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-select2-canal-container"><span class="select2-selection__rendered" id="select2-select2-canal-container" role="textbox" aria-readonly="true" title="Supermercado la Familia - Durazno"><span class="select2-selection__clear" title="Remove all items" data-select2-id="57">×</span>Supermercado la Familia - Durazno</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
 
 </div>

Thanks a lot


#6

If I understand correctly, you want the Select2 to appear next to (not below) the icon of the shaking hands, right? If that’s correct, then this code worked for me:

<body>
  <div class="row">
    <div class="col-md-4">
      <input id="canalUserId" name="canalUserId" type="hidden"
        class="form-control" value="">
      <label for="select2-canal" class="font-noraml">Canal</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-handshake-o"></i></span>
        <select id="select2-canal" name="select2-canal"
          class="select2-canal form-control" aria-hidden="true">
          <option value="73">Supermercado la Familia - Durazno
          </option>
        </select>
      </div>
    </div>
</body>
<script>
  $('#select2-canal').select2();
</script>

2019-10-04%2021_12_02-Select2%20with%20Bootstrap


#7

Yes, that’s what I want. But…
This is my code:

 <div class="col-md-4">
	<input id="canalUserId" name="canalUserId" type="hidden" class="form-control" value="" />
	<label class="font-noraml">Canal</label>
	<div class="input-group">
		<span class="input-group-addon"><i class="fa fa-handshake-o"></i></span>
		<select id="select2-canal" name="select2-canal" class="select2-canal form-control" aria-hidden="true">
		</select> 
	</div>
 </div>

When I load the page, the select should be empty, and the code looks like this:

<div class="col-md-4">
    <input id="canalUserId" name="canalUserId" type="hidden" class="form-control" value="">
    <label class="font-noraml">Canal</label>
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-handshake-o"></i></span>
        <select id="select2-canal" name="select2-canal" class="select2-canal form-control select2-hidden-accessible" aria-hidden="true" data-select2-id="select2-canal" tabindex="-1">
        </select><span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="1" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-select2-canal-container"><span class="select2-selection__rendered" id="select2-select2-canal-container" role="textbox" aria-readonly="true"><span class="select2-selection__placeholder">Buscar canal...</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> 
    </div>
</div>

And it shows like this:

image

I even cut the piece of code and placed it outside the form and other divs, but it shows the same.
Could it be by some kind of order loading .js files or .css files?

On page load, this is my script:

      $("#select2-canal").select2({
          language: {
              inputTooShort: function () {return "Debe ingresar al menos 3 caracteres";},
              minimumInputLength: function () {return "Debe ingresar al menos 3 caracteres";},
              noResults: function () {return "No se encontraron resultados";}
          },
          /*dropdownParent: $(".myInputGroupSelect"),*/
          minimumInputLength: 3,
          placeholder: "Buscar canal...",
          allowClear: true,
          width: "100%",
          debug: true,
          ajax: {
              type: "POST",
              url: "bpa-buscarcanal.php",
              delay: 500, 
              data: function (params) { 
                  return {
                      canal: params.term
                  }
              } ,
              processResults: function (resp) {
                  return {
                      results: resp
                  }
              }
          }

#8

Here is the HTML of my page after the Select2 is initialized:

<div class="input-group">
        <span class="input-group-addon"><i class="fa fa-handshake-o" aria-hidden="true"></i></span>
        <select id="select2-canal" name="select2-canal" class="select2-canal form-control select2-hidden-accessible" aria-hidden="true" data-select2-id="select2-canal" tabindex="-1">
          <option value="73" data-select2-id="2">Supermercado la Familia - Durazno
          </option>
        </select><span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="1" style="width: 481px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-select2-canal-container"><span class="select2-selection__rendered" id="select2-select2-canal-container" role="textbox" aria-readonly="true" title="Supermercado la Familia - Durazno
          ">Supermercado la Familia - Durazno
          </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
      </div>

The only differences I see between your page and mine is that your page doesn’t have an <option> in the <select>, and your <select> (and therefore your Select2 widget) has a style of width: 100%. I think it’s the style that’s causing your problem: width: 100% forces the select2 to be the full width of its container. But since you want the icon to be on the same line, you need to make your <select> small enough so the total width of the icon and the select2 fit within the col-md-4. Try making your <select> narrower and see if that solves your problem.