Блог

Я использую selectize.js 0.10.1 с загрузкой 3.0.1 в моем проекте. Когда у меня есть поле со списком selectize вне складной панели начальной загрузки, все отлично работает, как вы можете видеть на картинке.

Рабочий код:

 <section class="container">
    <div class="row" style="margin-bottom: 20px">
        <div class="col-lg-4">
            <select id="zastoj" placeholder="Razlog zastoja" class="demo-default selectized"></select>
        </div>
    </div>
</section>
  

Когда у меня есть поле со списком selectize внутри складной панели, поле со списком не может быть открыто / развернуто по щелчку, похоже, оно доступно только для чтения.

Нерабочий код:

 <section class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Operacije</h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
            </div>
        </div>
    </div>
</section>
  

Я заставил его работать, когда я использую Bootstrap 2.3.2 и selectize.js 0.9 в этой скрипке, но я не могу заставить ее работать с Bootstrap 3.1.1 и selectize.js 0.9 в этой скрипке. Я даже пробовал selectize 0.10.1, но безуспешно.

Можно ли это решить или это какая-то проблема с версией? Мне нужно использовать Bootstrap 3.0 в моем проекте.

Я знаю, что немного опаздываю на вечеринку, но у меня была аналогичная проблема при selectize инициализации с помощью опции:

 dropdownParent: "body"
  

Если у вас есть эта опция в вашей инициализации selectize, удалите ее.

Панель имеет стиль css

 overflow:hidden;
  

Это то, что не позволяет элементу управления selectize отображаться. Вы можете либо жестко запрограммировать стиль, либо добавить его в свою таблицу стилей.

 <section class="container">
<div class="panel panel-primary" style="overflow:visible;">
    <div class="panel-heading">
        <h3 class="panel-title">Operacije</h3>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
        </div>
    </div>
</div>
</section>
  

или в вашей таблице стилей:

 .panel, .panel-default, .panel-primary {
    overflow: visible;
}
  

Для тех, кто использует selectize.js наряду с AngularJS убедитесь <select> , что он не находится внутри <div ng-if="..."> ... </div> причины, по которой он не будет работать. Вместо этого используйте ng-show и ng-hide вместо. Это также относится к сценарию, в котором a <select> содержится в модальном.

Пример:

 <!-- This won't work -->                                
<div ng-if="condition == true">
    <select id="my-selectize"></select>
</div>

<!-- This will work -->                             
<div ng-show="condition == true">
    <select id="my-selectize"></select>
</div>