Question

我试图使用unpkg将 MDC Web组件添加到我的网站上，并且在实施时遇到了一个问题，即我并排使用了两个选择元素。问题是从中选择一个选项在第一个select元素中，该元素略微向下移动，而在从第二个select元素中选择选项时，第一个元素被移至其先前的位置。我无法理解它为什么发生。材料网组件的数量。

<!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

我在这里与团队中的另一个人进行了调查。随附的是修复它的codepen。

我认为此问题仅在Chrome上发生。检查Firefox-我没有发生
当选择项带有/不带有值时（在Chrome中），选择项的高度正在改变。
为解决此问题，我们用div包裹了每个选择，并显示了两个元素的父元素：flex。

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

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

MDC-Web选择组件

1 个答案: