[筆記] select2 套件多選時要避免更動的 css @地瓜大的飛翔旅程

章節連結

注意事項
程式碼

與 jQuery 搭配起來相當實用的 select2 套件，若你想要更改其一些關於寬度、高度方面的設定的話，會有一些小地方要注意，以免造成使用 $.select2() 方法後出現異常。
jquery

注意事項

.select2-container 這個 class 是用於生成對應的浮動 dropdown 的基準，其 padding 和 margin 不能變動，否則會發生定位錯誤。不過寬度是可以設定上去的，但要用 !important 來強制覆蓋掉程式自動產生綁定在 html 上的 style。

程式碼

<div id="test__dropdown-wrapper">
  <select name="filter" id="test" class="form-control inline select2 select2--custom-test"> 
    <option value="A">Option A</option>
    <option value="B">Option B</option>
  </select>
</div>

#test__dropdown-wrapper {
    position: relative;
    margin: 8px;
}

#test__dropdown-wrapper .select2-container {
    width: 300px!important;
}

@media (max-width: 1299px){
  #test__dropdown-wrapper{
    margin: 8px 0;
  }

  .select2--custom-test {
    width: 100%!important;
    margin: 8px 0;
  }
}

<option value="A">Option A</option>

<option value="B">Option B</option>

</select>

</div>

#test__dropdown-wrapper {

position: relative;

margin: 8px;

}

#test__dropdown-wrapper .select2-container {

width: 300px!important;

}

@media (max-width: 1299px){

#test__dropdown-wrapper{

margin: 8px 0;

}

.select2--custom-test {

width: 100%!important;

margin: 8px 0;

}

按讚加入粉絲團

注意事項

程式碼

延伸閱讀