Высота меню Bootstrap select не помещается на экране? - PullRequest
Новая
       41

Высота меню Bootstrap select не помещается на экране?

0 голосов
/ 13 сентября 2018

Я использую bootstrap-select 1.13.1, и в одной из моих форм элементы в выпадающем меню не помещаются на экране.Вот изображение: enter image description here

Как видно на изображении, последний вариант не виден.В других формах у меня нет этой проблемы.Также я заметил, что это происходит, когда я использую .selectpicker("refresh").Прежде чем использовать обновление, меню выбора выглядит следующим образом: enter image description here

Я не уверен, что может вызвать эту проблему в процессе .selectpicker("refresh").Мне нужно использовать обновление после добавления нового элемента или обновления существующего элемента в меню выбора.Есть ли способ исправить эту проблему с помощью width и height меню выбора?Вот мой пример рабочего кода: 

var appData = {
      Buildings : [
        {BLDGNAME : "Test 1", BLDGNUMBER : "2234"},
        {BLDGNAME : "Test 2", BLDGNUMBER : "2534"},
        {BLDGNAME : "Test 3", BLDGNUMBER : "2734"},
        {BLDGNAME : "Test 4", BLDGNUMBER : "2294"}
      ]
    }

    $(document).ready(function(){
      loadBuildings();
    });

    function loadBuildings(){
        populateBuildings();
    }

    function populateBuildings(){
        var fldBldg = $("select.bldg-menu");
        fldBldg.find("option:gt(0)").remove(); // Remove all but the first option in select menu.

        $.each(appData.Buildings, function (key, value) {
            fldBldg.append($("<option></option>").val(value.BLDGNUMBER).text(value.BLDGNAME));
        });
        fldBldg.selectpicker("refresh");
    }

    $("#add").on("click",addNew);
    function addNew(){
      appData.Buildings.push({BLDGNAME : "Test 5", BLDGNUMBER : "6234"});
      loadBuildings();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form name="frmDemog" id="frmDemo">
  <div class="form-group">
    <label class="control-label" for="bldg"><span class="label label-primary">Building:</span></label>
    <select class="form-control bldg-menu selectpicker" name="frmDemo_bldg" id="frmDemo_bldg" data-live-search="true" required>
      <option value="">--Choose Building--</option>
    </select>
  </div>
</form>

В моем фрагменте выше эта проблема не является проблемой.Высота и ширина выглядят хорошо.Мне интересно, есть ли что-то еще, что может вызвать эту проблему.Моя форма выглядит так же, но у меня есть больше полей в ней.Если кто-то знает или испытал ту же проблему, пожалуйста, сообщите мне, если у вас есть хороший способ решить эту проблему.

...