1

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.

<!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>
Božo Stojković
  • 2,893
  • 1
  • 27
  • 52
themv
  • 13
  • 1
  • 4

1 Answers1

0

I did some investigation with another person on the team here. Attached is a codepen of what fixes it.

  1. I think this issue only happens on Chrome. Check Firefox - it didn't happen to me
  2. The heights of the select are changing when a select is with/without a value (in Chrome).
  3. To overcome this issue, we wrapped each select with a div, and made the parent of the 2 elements display: flex.

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

<div style="display: flex">
  <div>
   <SelectElement ... >
  </div>
  <div>
   <SelectElement ... >
  </div>
</div>
Matt Goo
  • 1,118
  • 1
  • 11
  • 12
  • Thank you very much man it works. I found another way but I don't know whether it is a right practice,adding **float:left;** to the **select-position** class is fixing it. I want to know why is this happening I mean what is the problem inside the mdc-web select component – themv Aug 13 '18 at 18:46
  • And also how to align the select tags in the center of the page? – themv Aug 13 '18 at 18:50
  • Vertically center? Or horizontally? If you use display flex, its quite as simple as using justify-content or align-items. – Matt Goo Aug 13 '18 at 19:26
  • I wouldn't use float: left. In most cases, float should be used as a last resort, since it takes the elements out of the flow of the document. – Matt Goo Aug 13 '18 at 19:27
  • man in the above example you added **display:flex** to the div element and in the code pen example you added it to the **body** element which is better? and one more question,in case of adding **display:flex** to the div element I also added the ** justify-content:center** property to the div element then the select boxes are horizontally aligned but when I add the **align-items:center** property to the div element they are not being vertically aligned do I have to add height property and if so then how many pixels should it be? – themv Aug 13 '18 at 20:22
  • You should add it to the div, not the body. You probably won't want your entire body to be display:flex. So just scope the display: flex to your form elements. – Matt Goo Aug 13 '18 at 20:27
  • Your parent div must be full width height. I updated the codepen to show it: https://codepen.io/moog16/pen/GBeLxE – Matt Goo Aug 13 '18 at 20:31