Select2文本框宽度错误

Question

I am having alot of trouble with select2 dropdown lists.

Im working in wordpress and my problem is that the select box does not fill its width. The wierd thing is that the dropdown arrow is at the correct position but the width of the select "textbox" is only as big as the currently selected content text.

See how the textbox is only as big as it´s content

different content

Here is my code:

HTML

<li>
            <label for="flokkur" >Flokkur <span class="required">*</span></label>
                <select name="flokkur" id="flokkur" class="sj_select2" style="width: 100%">
                    <option > Vörukaup m.Vsk</option>
                    <option > Rekstrarvörur og annar framl. kosntn. m.Vsk. </option>
                    <option> Rekstrar kostnaður húsnæðis m.Vsk. </option>
                    <option> Húsaleiga m. Vsk. </option>
                    <option> Húsaleiga án Vsk. </option>
                    <option> Gjalfærð smááhöld og búnaður m. Vsk.</option>
                    <option> Viðhald áhalda og tækja m. Vsk.</option>
                    <option> Ýmis akeypt þjónusta m. Vsk. </option>
                    <option> Ýmis skrifstofu kostnaður m. Vsk. </option>
                    <option> Lausafjár tækjaleiga m. Vsk.</option>
                    <option> Sölukostnaður auglýsingar og fl. m. Vsk.</option>
                    <option> Ýmis kostnaður með 11% Vsk. </option>
                    <option> Ýmis annar kostnaður (funda og Vsk.) án Vsk. </option>
                    <option> Risna og gjafir án Vsk.</option>
                    <option> Ferðakostnaður án Vsk. annar en rekstur bifreiðar </option>
                    <option> Rekstur bifreiðar Ökutæki án Vsk. </option>
                </select>

</li>

Javascript:

<script type="text/javascript">

jQuery(document).ready(function() {
  jQuery(".sj_select2").select2({
    width: '100%'
  });
    jQuery("#test_select").select2();
});
</script>

I have tried all sorts of solutions such as

jQuery(document).ready(function() { 
jQuery(".sj_select2").select2({ width: 'resolve' });           
});

or

jQuery(document).ready(function() { 
jQuery(".sj_select2").select2({ width: 'auto' });           
});

I have also messed alot with css to try to figue this out but so far no luck. Any help is really appreciated.

Answer 1

I think some issues in select2 js or css file.Please try this code.Here i have included the latest css and js ( 4.0.3 )

  jQuery(document).ready(function() { jQuery(".sj_select2").select2({ width: '100%' }); jQuery("#test_select,#test1").select2(); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js" crossorigin="anonymous"></script> <li> <label for="flokkur" >Flokkur <span class="required">*</span></label> <select name="flokkur" id="flokkur" class="sj_select2" style="width: 100%"> <option > Vörukaup m.Vsk</option> <option > Rekstrarvörur og annar framl. kosntn. m.Vsk. </option> <option> Rekstrar kostnaður húsnæðis m.Vsk. </option> <option> Húsaleiga m. Vsk. </option> <option> Húsaleiga án Vsk. </option> <option> Gjalfærð smááhöld og búnaður m. Vsk.</option> <option> Viðhald áhalda og tækja m. Vsk.</option> <option> Ýmis akeypt þjónusta m. Vsk. </option> <option> Ýmis skrifstofu kostnaður m. Vsk. </option> <option> Lausafjár tækjaleiga m. Vsk.</option> <option> Sölukostnaður auglýsingar og fl. m. Vsk.</option> <option> Ýmis kostnaður með 11% Vsk. </option> <option> Ýmis annar kostnaður (funda og Vsk.) án Vsk. </option> <option> Risna og gjafir án Vsk.</option> <option> Ferðakostnaður án Vsk. annar en rekstur bifreiðar </option> <option> Rekstur bifreiðar Ökutæki án Vsk. </option> </select> </li> <div style="margin-top:10px"></div> <select name="test1" id="test1" class="sj_select2"> <option > Vörukaup m.Vsk</option> <option > Rekstrarvörur og annar framl. kosntn. m.Vsk. </option> <option> Rekstrar kostnaður húsnæðis m.Vsk. </option> <option> Húsaleiga m. Vsk. </option> <option> Húsaleiga án Vsk. </option> <option> Gjalfærð smááhöld og búnaður m. Vsk.</option> <option> Viðhald áhalda og tækja m. Vsk.</option> <option> Ýmis akeypt þjónusta m. Vsk. </option> <option> Ýmis skrifstofu kostnaður m. Vsk. </option> <option> Lausafjár tækjaleiga m. Vsk.</option> <option> Sölukostnaður auglýsingar og fl. m. Vsk.</option> <option> Ýmis kostnaður með 11% Vsk. </option> <option> Ýmis annar kostnaður (funda og Vsk.) án Vsk. </option> <option> Risna og gjafir án Vsk.</option> <option> Ferðakostnaður án Vsk. annar en rekstur bifreiðar </option> <option> Rekstur bifreiðar Ökutæki án Vsk. </option> </select> 

I hope this will fix your issue.

Answer 2

The above solution did not resolve this issue in my case.

The solution that worked for me in the end was simply removing the list "li" tags that enclosed the select element.