文章/答案/技术大牛

发布

问MDC-Web选择组件
EN

Stack Overflow用户

提问于 2018-08-12 14:29:09

回答 1查看 2.8K关注 0票数 1

我试图使用unpkg将MDC网络组件添加到我的网站上，在实现过程中遇到了一个问题，在使用两个选择元素时，在从第一个选择元素中选择一个选项时，元素正在稍微向下移动，当从第二个select元素中选择选项时，第一个元素被移动到以前的位置，我无法理解为什么是happening.In，我只是包含了材料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>

mdc-components

html

material-design

material-components

material-components-web

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-13 17:36:25

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

我认为这个问题只发生在Chrome上。去看看火狐--这不是我的事
当选择有/没有值时(在Chrome中)，select的高度正在改变。
为了克服这个问题，我们用div包装每个select，并使两个元素的父元素显示: flex。

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51809751

复制

相似问题

问MDC-Web选择组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MDC-Web选择组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MDC-Web选择组件
EN