Bootstrap 4: selectpicker 1.13 не соответствует содержимому выбранного параметра - PullRequest
Новая
       23

Bootstrap 4: selectpicker 1.13 не соответствует содержимому выбранного параметра

0 голосов
/ 23 мая 2018

Проблема пока проста: выбор сам по себе не соответствует размеру выбранной опции.Это кажется слишком низким и переполняет контейнер.Кроме того, каретка отображается в верхнем правом углу, а не там, где она должна быть (в центре справа).Выглядит так:

enter image description here

Со следующим кодом: 

<select class="selectpicker" data-style='btn-primary'>
    <option value="value">I'm a sad and a little bit too long option</option>
</select>

Как видите, проблем с отображением нетвыберите сам выпадающий список, просто кнопка (начальное поле с текущим выбранным значением) по какой-то причине выглядит испорченной.Я подозреваю, что это может быть проблемой с самим плагином, так как я едва применяю любые связанные стили, которые могут помешать.Я хотел бы получить совет, как я могу заставить это работать должным образом, потому что мне действительно нравится плагин, и я не хотел бы писать всю функциональность самостоятельно.Я просто не очень хорошо разбираюсь в CSS и понимаю его структуру.Я взглянул на исходный html, который генерирует плагин, и просто кажется, что родительский контейнер (div.filter-option) пропускает некоторые свойства, необходимые, чтобы указать ему, где расположить содержимое (текстовый элемент * 1012).*) и как с этим справиться.

Источник плагина (предназначенный для официальной совместимости с Bootstrap 4 версии плагина Bootstrap Select): https://github.com/snapappointments/bootstrap-select/releases/tag/v1.13.0 Моя версия Bootstrap является встроенной по умолчаниюс Laravel 5.6 Bootstrap 4.0.Любая помощь / совет / анализ проблемы с благодарностью!Заранее спасибо!

ОБНОВЛЕНИЕ 1: Очень странно ... Следующий код: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

обеспечивает отличный результат при отображении в новом чистом jsfiddle,но вставленный в пользовательский локальный (и онлайн) файл .html, он по-прежнему отображается грязно.Я действительно не знаю, почему это может произойти!

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Ладно, после действительно трудного времени, чтобы выяснить это, я нашел реальную причину этого поведения, лежащую глубоко под тем, что казалось проблематичным.* барабаны * Проблема заключалась в том, что <!DOCTYPE html> не отправлялся в браузер как первое, что я получил в ответе на моей html-странице.Так что на самом деле это было причиной необычного поведения плагина (очевидно, этот вопрос не затрагивал НИЧЕГО еще на всей моей странице до этого момента).Однако причиной этой ошибки была действительно забавная часть всего этого.Я использую laravel для управления своими представлениями и использовал сложный набор разделов и стеков для оптимальной загрузки ресурсов и контента.Вся проблема возникла из-за того, что в этом небольшом фрагменте HTML-кода, который я отправлял обратно в браузер, я забыл маленький кусочек <style> в одном теге в самом низу моего .blade.php файла,по какой-то причине это осталось после директивы @endsection.Так что в основном laravel решил, что он должен иметь приоритет над тем, что было в теге section, и отправил его сначала в мой домашний вид (что привело к его отображению поверх всего документа, отображаемого браузером).Блин, это было тяжело.Спасибо за ответы и помощь!

0 голосов
/ 23 мая 2018

, если вы хотите уменьшить размер, равный select, вы можете использовать этот CSS. 

.bootstrap-select {
  position: relative !important;
}

.bootstrap-select .dropdown-menu {
  right: 0 !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  white-space: initial !important; 
}


$('.selectpicker').selectpicker();
.bootstrap-select {
  position: relative !important;
}

.bootstrap-select .dropdown-menu {
  right: 0 !important;
  transform: translate3d(0, 37px, 0px) !important;
}

.bootstrap-select .dropdown-menu li a span.text {
  white-space: initial !important; 
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
...