Компонент выбора MDC-Web

Я пытаюсь добавить веб-компоненты MDC на свой веб-сайт с помощью unpkg, и во время реализации я столкнулся с проблемой, когда я использую два элемента выбора рядом. Проблема заключается в выборе варианта из первого выбора element элемент перемещается немного вниз, и при выборе варианта из второго элемента select первый элемент перемещается на его предыдущую позицию. Я не могу понять, почему это происходит. В моем HTML я просто включил файлы css и js материала веб-компоненты.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <style type="text/css">
        .select-position {
            min-width: 175px;
            left: 25%;
            margin:5px;
        }
    </style>
</head>
<body>
    <div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
        <select class="mdc-select__native-control">
            <option></option>
            <option>First Year</option>
            <option>Second Year</option>
        </select>
        <label class="mdc-floating-label">Select Year</label>
        <div class="mdc-notched-outline">
            <svg>
                <path class="mdc-notched-outline__path"></path>
            </svg>
        </div>
        <div class="mdc-notched-outline__idle"></div>
    </div>
    <div class="mdc-select select-position mdc-select--outlined" data-mdc-auto-init="MDCSelect">
        <select class="mdc-select__native-control">
            <option></option>
            <option>CSE</option>
            <option>ECE</option>
        </select>
        <label class="mdc-floating-label">Select Branch</label>
        <div class="mdc-notched-outline">
            <svg>
                <path class="mdc-notched-outline__path"></path>
            </svg>
        </div>
        <div class="mdc-notched-outline__idle"></div>
    </div>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
</body>
</html>


material-design html material-components material-components-web mdc-components
person themv    schedule 12.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я провел расследование с другим человеком из команды здесь. Прилагается код того, что это исправляет.

  1. Я думаю, что эта проблема возникает только в Chrome. Проверьте Firefox - со мной этого не случилось
  2. Высота выделения меняется, когда выделение имеет значение или не имеет значения (в Chrome).
  3. Чтобы решить эту проблему, мы заключили каждый выбор в div и заставили отображать родительский элемент двух элементов: flex.

https://codepen.io/moog16/pen/GBeLxE.

<div style="display: flex">
  <div>
   <SelectElement ... >
  </div>
  <div>
   <SelectElement ... >
  </div>
</div>
person Matt Goo    schedule 13.08.2018
comment
Спасибо большое, человек, это работает. Я нашел другой способ, но не знаю, правильно ли это, добавление float: left; в класс select-position исправляет его. Я хочу знать, почему это происходит. Я имею в виду, в чем проблема компонента выбора mdc-web. - person themv; 13.08.2018
comment
А также как выровнять теги select по центру страницы? - person themv; 13.08.2018
comment
Вертикально по центру? Или по горизонтали? Если вы используете display flex, это так же просто, как использовать justify-content или align-items. - person Matt Goo; 13.08.2018
comment
Я бы не стал использовать float: left. В большинстве случаев float следует использовать в крайнем случае, поскольку он выводит элементы из потока документа. - person Matt Goo; 13.08.2018
comment
man в приведенном выше примере вы добавили display: flex в элемент div, а в примере с пером кода вы добавили его в элемент body, что лучше? и еще один вопрос: в случае добавления display: flex к элементу div я также добавил свойство ** justify-content: center ** к элементу div, тогда поля выбора выравниваются по горизонтали, но когда Я добавляю свойство align-items: center к элементу div, который не выравнивается по вертикали, нужно ли мне добавлять свойство высоты, и если да, то сколько пикселей должно быть? - person themv; 13.08.2018
comment
Вы должны добавить его в div, а не в тело. Вы, вероятно, не захотите, чтобы все ваше тело отображалось: flex. Так что просто укажите display: flex на элементы формы. - person Matt Goo; 13.08.2018
comment
Ваш родительский div должен иметь полную ширину и высоту. Я обновил код, чтобы показать это: codepen.io/moog16/pen/GBeLxE - person Matt Goo; 13.08.2018