Select2 - можем ли мы установить выпадающее меню в соответствии со стилем остальной части страницы? - PullRequest
Новая
       3

Select2 - можем ли мы установить выпадающее меню в соответствии со стилем остальной части страницы?

0 голосов
/ 04 марта 2020

Я просмотрел документацию для Select2 (https://select2.org) и искал их форум, но не нашел ответа - возможно, мой ограниченный опыт таков, что я даже не спрашиваю вопрос:

Я использую Materialise css (https://materializecss.com/) для оформления моего сайта. Как получить раскрывающийся список Select2, соответствующий внешнему виду моей страницы?

Вот мой код HTML: 

<!doctype html>
<html>   
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body class="body-custom">
    <div class="input-field col s12">
       <select class="js-example-basic-single" name="country" id="country">
             <option value="" disabled selected>Choose Country</option>
             <option value="Afghanistan">Afghanistan</option>
             <option value="Åland Islands">Åland Islands</option>
             <option value="Albania">Albania</option>
       </select>
    </div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"> 
</script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="js/script.js"></script>

</body>

</html>

CSS: 

#form {
    max-width: 700px;
    margin-top: 50px;
}

.type label {
    margin-right: 50px;
}

#proid {
    display: none;
}

.info {
    padding-left: 10px;
    padding-bottom: 20px;
    padding-top: 50px;
}

.nav-custom {
    background-color: #333947;
}

.body-custom {
    background-color: #f0f7fa;
}

.title {
    font-family: "Open Sans";
    font-weight: 600;
}

РЕДАКТ. 1:

Кодовая ссылка:

https://codepen.io/Nola111/pen/yLNzeQp

1 Ответ

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

Хорошо, так что это незавершенная работа, так как я уверен, что вы попросите меня стилизовать раскрывающийся список в следующем ...!

https://codepen.io/doughballs/pen/zYGERzX

Итак, во-первых, Select2 принудительно устанавливает ширину 700px в select, что делает его шире, чем материализованные css входные данные (которые всегда имеют ширину: 100%). Итак, мы переопределяем это здесь. ! Важный флаг нужен, к сожалению. 

.select2 {
  width:100% !important;
}

Далее, фактическое поле выбора. Как вы знаете, дляizeize css используется очень минимальное моделирование - на самом деле это просто нижняя граница. Поэтому я посмотрел на базовые стили, которые применяются ко всем материализация css поля ввода , скопировал их в кодовое поле и затем применил их к следующим двум элементам. Select2 делает действительно классные вещи, много вложенных div-ов (urgh), и понадобилось немного времени, чтобы понять, какого черта он делает: 

span.select2-selection.select2-selection--single,
span.select2-selection__rendered {
    // These are base materializecss input styles
    padding-left:0 !important;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    border-radius: 0;
}

В качестве заключительного замечания - могу ли я спросить, почему вы используете сторонняя библиотека для выбора? Я не очень разбираюсь в Select2, я быстро просмотрел документы и, по-видимому, они предлагают расширенную функциональность для входов Select. Materialise css может делать то же самое, не переопределяя стили и не импортируя дополнительные css.

Если вам интересно, я могу показать вам кодовую ручку, которая использует автозаполнение, чтобы получить функциональность, аналогичную вашему примеру. Здесь

...