1

我正在尝试使用 unpkg 将MDC Web 组件添加到我的网站，并且在实现时遇到了一个问题，我并排使用了两个选择元素。问题是从第一个选择元素中选择一个选项时，元素略微向下移动并且从第二个选择元素中选择选项时，第一个元素被移动到之前的位置。我无法理解为什么会发生这种情况。在我的 HTML 中，我只包含了材料 Web 组件的 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>

4

1 回答 1

0

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

  1. 我认为这个问题只发生在 Chrome 上。检查 Firefox - 它没有发生在我身上
  2. The heights of the select are changing when a select is with/without a value (in Chrome).
  3. 为了克服这个问题，我们用一个 div 包裹每个选择，并让两个元素的父元素显示：flex。

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

<div style="display: flex">
  <div>
   <SelectElement ... >
  </div>
  <div>
   <SelectElement ... >
  </div>
</div>
于 2018-08-13T17:36:25.547 回答