jquery - Select2 文本框宽度异常

Question

我在使用 select2 下拉列表时遇到了很多麻烦。

我在 wordpress 工作，我的问题是选择框没有填满它的宽度。奇怪的是，下拉箭头位于正确的位置，但选择“文本框”的宽度仅与当前选定的内容文本一样大。

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

different content

这是我的代码:

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>

我已经尝试过各种解决方案，例如

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

或

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

我也曾多次使用 CSS 来尝试解决这个问题，但到目前为止还没有成功。非常感谢任何帮助。

Answer 1

我认为 select2 js 或 css 文件中存在一些问题。请尝试此代码。这里我包含了最新的 css 和 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>

我希望这能解决您的问题。