Bootstrap выберите добавить остаточное пространство при обновлении страницы - PullRequest
Новая
       50

Bootstrap выберите добавить остаточное пространство при обновлении страницы

0 голосов
/ 22 октября 2018

Bootstrap select добавляет дополнительное остаточное пространство в верхней части раскрывающегося списка при отправке формы, как прикреплено на изображении.enter image description here

Выпадающая разметка 

<div class="container-fluid form-group">
    <div class="row">
        <div class="col-md-3">
            <label for="template">Templates</label>
            <select id="template" class="selectpicker form-control" data-live-search="true" name="template">
                <option value="0" data-query="NONE">Select Template</option>
                <c:forEach var="template" items="${templateDetails}">
                    <option value="${template.templateId}" data-query="${template.query}">${template.templateName}</option>
                </c:forEach>             
            </select>
        </div>
    </div>
</div>

предоставленная разметка 

<div class="col-md-3">
  <label for="template">Templates</label>

  <div class="btn-group bootstrap-select form-control">
    <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="template" title="sample_template" aria-expanded="false"><span class="filter-option pull-left">sample_template</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>

    <div class="dropdown-menu open" role="combobox" style="max-height: 287px; overflow: hidden; min-height: 42px;">
      <div class="bs-searchbox">
        <input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
      </div>

      <ul class="dropdown-menu inner" role="listbox" aria-expanded="false" style="max-height: 233px; overflow-y: auto; min-height: 0px;">
        <li data-original-index="0" class="active"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">Select Template</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>

        <li data-original-index="1" class="selected"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="text">sample_template</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>

        <li data-original-index="2"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">sample_template_2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      </ul>
    </div>

    <select id="template" class="selectpicker form-control" data-live-search="true" name="template" tabindex="-98">
      <option value="0" data-query="NONE">Select Template</option>
      <option value="1008" data-query="query2">sample_template</option>
      <option value="1009" data-query="query1">sample_template_2</option>
    </select>
  </div>
</div>

Как решить эту проблему?

...