CSS — добавление выбора ширины раскрывающегося списка и прокрутки

avatar
John M
1 июля 2021 в 20:37
51
1
0

Я получил select dropdwon следующим образом

   <div style="overflow: auto; max-height: 200px;">
   <select id="ddl-width-wrap">
          <option value="1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores</option>
          <option value="2">et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est</option>
          <option value="3">laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </option>
          <option value="4">officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</option>
          <option value="5">officiis debitis aut rerum</option>
          <option value="6">necessitatibus saepe eveniet ut et voluptates</option>
          <option value="7">rum rerum hic tenetur a sapiente delectus</option>
          <option value="8">sum rerum hic tenetur a sapiente delectus</option>
          <option value="9">fum rerum hic tenetur a sapiente delectus</option>
          <option value="10">aum rerum hic tenetur a sapiente delectus</option>
          <option value="11">rtum rerum hic tenetur a sapiente delectus</option>
          <option value="12">rumq rerum hic tenetur a sapiente delectus</option>
          <option value="13">rumer rerum hic tenetur a sapiente delectus</option>
   </select> 
  </div>

Я хотел бы перенести параметры длины на новую строку и иметь прокрутку по оси Y. Я попытался обернуть выделение с помощью div и настроить стиль с переполнением на автоматический и максимальную высоту до 200 пикселей, но не получил желаемого результата. Может ли кто-нибудь помочь в том, как это можно решить?

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

Источник
Liftoff
1 июля 2021 в 20:39
1

Элемент select по умолчанию использует системный рендеринг, поэтому, кроме нескольких параметров, таких как размер шрифта, вы не можете изменить способ его представления.

Ответы (1)

avatar
Kinglish
1 июля 2021 в 21:11
0

Одним из вариантов является использование select2, что дает вам множество вариантов стиля и представления. Здесь показано, как реализовать и переопределить стили (при желании)

. 

$(document).ready(function() {
let sconfig = {
    templateResult: function(data) {
      if (!data.element) {
        return data.text;
      }
      let $element = $(data.element);
      let $wrapper = $('<div></div>');
      $wrapper.addClass('option');
      $wrapper.text(data.text);
      return $wrapper;
    }
  }
  
  $('#ddl-width-wrap').select2(sconfig);
});
#ddl-width-wrap {
  width: 400px;
}

.option {
  padding: 15px;
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div>
  <select id="ddl-width-wrap">
    <option value="1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores</option>
    <option value="2">et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est</option>
    <option value="3">laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </option>
    <option value="4">officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates</option>
    <option value="5">officiis debitis aut rerum</option>
    <option value="6">necessitatibus saepe eveniet ut et voluptates</option>
    <option value="7">rum rerum hic tenetur a sapiente delectus</option>
    <option value="8">sum rerum hic tenetur a sapiente delectus</option>
    <option value="9">fum rerum hic tenetur a sapiente delectus</option>
    <option value="10">aum rerum hic tenetur a sapiente delectus</option>
    <option value="11">rtum rerum hic tenetur a sapiente delectus</option>
    <option value="12">rumq rerum hic tenetur a sapiente delectus</option>
    <option value="13">rumer rerum hic tenetur a sapiente delectus</option>
  </select>
</div>