Html Выберите «размер» вопрос - PullRequest
Новая
       7

Html Выберите «размер» вопрос

1 голос
/ 10 марта 2020

Элемент select, показанный здесь (с фиксированной шириной), имеет 3 варианта и size из 3. Таким образом, он должен точно соответствовать содержимому. Тем не менее, кажется, что зарезервировано достаточно места внизу, чтобы можно было показать все элементы option с той же высоты, что и не нужна. (Запустите фрагмент кода, чтобы увидеть.)

Есть ли способ исправить это, чтобы после последней option?

не было лишнего пробела 

.myClass select 
{
    width: 150px;
}

.myClass option{
   white-space: normal;
}
<div class="myClass">
    <select name="mySelect" size="3">
        <option>1</option>
        <option>2 This options is very long so we wrap the text. That causes the select to show extra blank space at the bottom!</option>
        <option>3</option>
    </select>
</div>

Редактировать

Судя по комментариям, браузеры различаются по способу их отображения.

1 Ответ

1 голос
/ 12 марта 2020

Если проблема не будет решена командой Chromium, вы можете использовать метод, описанный ниже, в качестве обходного пути.

Вы можете рассчитать общую высоту опций, а затем установить ее как высоту <select> : 

var options = document.getElementsByTagName("option");
var opheight = 0;
for (i = 0; i < options.length; i++) {
  opheight += options[i].offsetHeight;
}
document.getElementsByTagName("select")[0].style.height = opheight + "px";
.myClass select {
  width: 150px;
}

.myClass option {
  white-space: normal;
}
<div class="myClass">
  <select name="mySelect" size="3" id="mySelect">
    <option>1</option>
    <option>2 This options is very long so we wrap the text. That causes the select to show extra blank space at the bottom!</option>
    <option>3</option>
  </select>
</div>
...