Ограничить содержимое Bootstrap Выберите содержимое для столбцов, контейнер которых ограничен - PullRequest
Новая
       19

Ограничить содержимое Bootstrap Выберите содержимое для столбцов, контейнер которых ограничен

0 голосов
/ 11 января 2019

У меня есть компонент bootstrap-select, содержимое которого выходит за пределы сетки, кнопка, срабатывающая при этом, соответствует. Это на самом деле полностью уходит со страницы:


Разметка (шаблонизация Django, но это не актуально, я не думаю): 

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
    <div class="form-group">
      <select
        class="selectpicker form-control"
        data-title="Please select"
      >
        {% for item in items %}
        <option
          data-content="
            <div>
              <div>
                <i class='fa {{ item.icon }}'></i>
                <h4-text'>{{ item.title }}</h4>
              </div>
              <div>
                <p class='text'>{{ item.very_long_text }}</p>
              </div>
            </div>"
        ></option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>

Удаление узла item.very_long_text (p.text) решает проблему, и сетка придерживается, так что это определенно проблема. Я попытался применить следующие стили к этому узлу, чтобы контролировать проблему, но она сохраняется:

  • ширина: авто;
  • ширина: 100%;
  • overflow-wrap: break-word;
  • переполнение: обычный;
  • слово-перерыв: разбить все;
  • Цвет: красный;
  • пробел: [каждое доступное значение];
  • перенос слов: break-word;

Фактически, единственное решение, которое работает, это это : 

.dropdown-menu {
  max-width:100%;
}

Но мне кажется очень неаккуратным переопределить класс Bootstrap, который - из того, что я понимаю - означал † - работать так, как я хочу, во-первых.

Как я могу ограничить содержимое этого меню выбора столбцами сетки, которыми ограничен его триггер?

† Раздел, на который я ссылался в документации Boostrap Select, проясняет IMO

1 Ответ

0 голосов
/ 11 января 2019

Похоже, что содержимое расширяет сетку, потому что по умолчанию для элементов выпадающего меню начальной загрузки white-space установлено значение nowrap. Сброс этого значения до normal, например, путем применения класса к каждому элементу data-content, кажется, решает эту проблему. Ниже приведено минимальное воспроизведение. 

$('select').selectpicker();
.fix {
  white-space: normal
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/bootstrap-select.min.js"></script>

<select class="selectpicker" data-title="Please select">
  <option title="Option 1"
    data-content="
      <div class='fix'>
        <div>
          <i class='glyphicon glyphicon-ok'></i>
          <h4>Lorem Ipsum</h4>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>"
  ></option>
  <option title="Option 2"
    data-content="
      <div class='fix'>
        <div>
          <i class='glyphicon glyphicon-ok'></i>
          <h4>Lorem Ipsum</h4>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>"
  ></option>
  <option title="Option 3"
    data-content="
      <div class='fix'>
        <div>
          <i class='glyphicon glyphicon-ok'></i>
          <h4>Lorem Ipsum</h4>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>"
  ></option>
</select>
...