MDC-Web Select Component

Views: 135 Ask New Question


I am trying to add MDC Web Components to my website using unpkg and while implementing I ran into a problem where I am using two select elements side by side.The problem is while selecting a option from the first select element the element is moving slightly downwards and while selecting option from the second select element the first element is moved to it previous position.I am unable to understand why it is happening.In my HTML i just included the css and js files of the material web components.

This is the code.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/dist/material-components-web.min.js"></script>
<script>mdc.autoInit()</script>
</body>
</html>
On By

0 Answers


No one answered yet. Be the first one to answer.


Answer This Question