Меню выбора компонентов дизайна материалов неправильно отображается для Интернета

Я пытаюсь добавить базовое меню выбора MDC на свой веб-сайт. Но это не совсем правильно — справа от поля показана стрелка MDC вместе с обычной стрелкой HTML, а слова расположены слишком близко к метке меню (здесь).

HTML-часть —

<div class="mdc-select mdc-select--box day-select">
  <select class="mdc-select__native-control" required>
    <option value="" disabled selected></option>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

часть app.scss

@import "@material/select/mdc-select";

и последняя часть app.js

import {MDCSelect} from '@material/select';
new MDCSelect(document.querySelector('.day-select'));

Кажется, у меня есть все, что мне нужно, но я явно упускаю что-то глупое. Любые советы приветствуются - спасибо!


material-design html material-components material-components-web mdc-components
person Paulo Costa    schedule 28.06.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Когда этот вопрос был первоначально задан, проблемы со стилем, должно быть, исходили из некоторых дополнительных css или js, не показанных в вопросе (подробности см. В истории редактирования). С тех пор необходимая разметка для выбора MDC компоненты изменились. См. следующий фрагмент для примера настройки.

const select = mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change', () => {
  console.log(select.selectedIndex, select.value);
});
.mdc-select__anchor,
.mdc-select__menu {
  width: 400px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Select Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div class="mdc-select">
  
    <div class="mdc-select__anchor">
      <i class="mdc-select__dropdown-icon"></i>
      <div class="mdc-select__selected-text"></div>
      <span class="mdc-floating-label">Pick a Food Group</span>
      <span class="mdc-line-ripple"></span>
    </div>
    
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
      <ul class="mdc-list">
        <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
        <li class="mdc-list-item" data-value="grains">
          <span class="mdc-list-item__text">
            Bread, Cereal, Rice, and Pasta
          </span
        </li>
        <li class="mdc-list-item" data-value="vegetables">
          <span class="mdc-list-item__text">
            Vegetables
          </span>
        </li>
        <li class="mdc-list-item" data-value="fruit">
          <span class="mdc-list-item__text">
            Fruit
          </span>
        </li>
      </ul>
    </div>
    
  </div>

</body>

</html>

person benvc    schedule 29.06.2018
comment
Да, ты совершенно прав. Странный. Спасибо за совет - буду искать. - person Paulo Costa; 29.06.2018
comment
На самом деле я тоже столкнулся с этим и не знаю, что не так :( Я не могу найти дополнительный CSS в Chrome Inspector - person Sticky; 05.08.2018
comment
@Sticky На самом деле, моя проблема оказалась в моих файлах json (package.json и package-lock.json) и версиях, к которым они обращались. Понизил версию с 0.36 до 0.35.2 и теперь вроде все нормально. - person Paulo Costa; 13.08.2018
comment
Оказывается, это было связано с некоторыми конфликтами с другим пакетом css - bootstrap-sassy - person Sticky; 13.08.2018

arrow_upward
1
arrow_downward

Я просто добавил этот код, чтобы решить эту проблему:

.mdc-select__native-control {
    -webkit-appearance: none;
    -moz-appearance: none;
}

Я обнаружил, что эта проблема возникает только в том случае, если вы используете MDC из модулей Node.js. Класс .mdc-select__native-control в модулях MDC Node не содержит двух указанных выше свойств. Хотя они присутствуют в material-components-web.min.css из CDN.

person ariecx    schedule 06.09.2019