MDC-Web Select 组件

Question

我正在尝试使用 unpkg 将 MDC Web Components 添加到我的网站，同时我运行遇到了一个问题，我使用了两个 select side.The 旁边的元素问题是，当 select 从第一个 select 元素选择一个选项时，元素略微向下移动，而 select 从第二个 select 选择一个选项] 元素第一个元素移到它之前 position.I 我无法理解为什么它是 happening.In 我的 HTML 我只是包含 css 和 [=27 的 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>

Answer 1

我在这里和团队中的另一个人做了一些调查。附件是修复它的代码笔。

我认为这个问题只发生在 Chrome。检查 Firefox - 它没有发生在我身上
当 select 是 with/without 一个值（在 Chrome 中）时，select 的高度正在改变。
为了解决这个问题，我们用 div 包裹了每个 select，并使 2 个元素的父元素显示：flex.

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

<div style="display: flex">
  <div>
   <SelectElement ... >
  </div>
  <div>
   <SelectElement ... >
  </div>
</div>

MDC-Web Select 组件

MDC-Web Select Component

html

material-design

material-components

material-components-web

mdc-components