MDC-Web Select Component

1088

I am trying to add <b>MDC Web Components</b> 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/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>

No answers yet!

6 years ago by