Hello! There is a form with select where the select2 plugin is used. Faced the following problem: select2 calculates the width of selects only when the page is loaded (the statement is probably wrong, but I have this), so for the div.select2-container selector div.select2-container set the width: 100% !important style.

I solved one problem, another one appeared - since div.select2-container is in the root of the body and has absolute positioning indented from the left edge, it selects its right edge from the body and expands it. Therefore, I had the idea to indicate in select2 a parent for the drop-down list. I did not find such a possibility in the plug-in documentation, does it exist at all, and if so, how to do it?

According to the link the page with the problem form , the problem is observed only in the mobile version in the developer mode - when the selektov opens, the header shifts to the right .

UPD: added a standard select where you can see that the drop-down list is located in the root of the body.

UPDD: I found an option here using AttachContainer , I tried it - the drop-down list remains in the same place. Made changes to the code.

 $(document).ready(function() { $(".js-example-basic-single").select2({ minimumResultsForSearch: Infinity, AttachContainer: $('.wrapper') }) }); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <div class="wrapper"> <select class="js-example-basic-single" style="width: 200px;"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> </div>

  • provide the code here. - Jean-Claude
  • added normal select code - Igor

1 answer 1

To specify the parent element for the drop-down list, use the dropdownParent property.

 $(document).ready(function() { $(".js-example-basic-single").select2({ minimumResultsForSearch: Infinity, dropdownParent: $('.wrapper') }) }); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <div class="wrapper"> <select class="js-example-basic-single" style="width: 200px;"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> </div>

To the question in the comment: since now all the elements with the wrapper class are selected, there may be a problem if there are several such elements. For the solution, you need to select the elements of the containers relative to the select element:

 $(document).ready(function() { $(".js-example-basic-single").each(function() { // Π±Π΅ΠΆΠΈΠΌ ΠΏΠΎ всСм сСлСктам $(this).select2({ // ΠΈΠ½ΠΈ Ρ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ minimumResultsForSearch: Infinity, dropdownParent: $(this).closest('.wrapper') // Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ элСмСнт с классом, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ сСлСкта }) }); }); 
 .wrapper { margin-bottom: 10px; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <div class="wrapper"> <select class="js-example-basic-single" style="width: 200px;"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> </div> <div class="wrapper"> <select class="js-example-basic-single" style="width: 200px;"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select> </div>

  • Thank you for your reply, inattention on my part. Please answer one more question: the form that you see on the site has an extended equivalent (with additional fields) in the form of a modal window. Those. A number of selections are repeated. The problem is that repeating selects stop working correctly, i.e. it is necessary to perform initialization again, but this, I believe, is not the most optimal solution. Is there a more rational option? codepen.io/Vlastelin/pen/pEYAxk - Igor
  • one
    @ Igor, updated the answer - Grundy