2

I'm trying to add a basic MDC select menu to my website. But it's not quite right—the right of the box shows the MDC arrow along with the normal HTML one, and the words are placed too close to the menu label (seen here).

HTML part—

<div class="mdc-select mdc-select--box day-select">
  <select class="mdc-select__native-control" required>
    <option value="" disabled selected></option>
    <option value="grains">
      Bread, Cereal, Rice, and Pasta
    </option>
    <option value="vegetables">
      Vegetables
    </option>
    <option value="fruit">
      Fruit
    </option>
  </select>
  <label class="mdc-floating-label">Pick a Food Group</label>
  <div class="mdc-line-ripple"></div>
</div>

app.scss part

@import "@material/select/mdc-select";

and the final app.js part

import {MDCSelect} from '@material/select';
new MDCSelect(document.querySelector('.day-select'));

Seems like I have everything I need, but I'm obviously missing something dumb. Any advice is appreciated—thanks!

benvc
  • 14,448
  • 4
  • 33
  • 54
Paulo Costa
  • 965
  • 2
  • 10
  • 15

2 Answers2

4

When this question was originally asked, the styling issues must have been coming from some additional css or js not shown in the question (see edit history for details). Since then, the required markup for MDC select components has changed. See the following snippet for an example setup.

const select = mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
select.listen('MDCSelect:change', () => {
  console.log(select.selectedIndex, select.value);
});
.mdc-select__anchor,
.mdc-select__menu {
  width: 400px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Select Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div class="mdc-select">
  
    <div class="mdc-select__anchor">
      <i class="mdc-select__dropdown-icon"></i>
      <div class="mdc-select__selected-text"></div>
      <span class="mdc-floating-label">Pick a Food Group</span>
      <span class="mdc-line-ripple"></span>
    </div>
    
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
      <ul class="mdc-list">
        <li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
        <li class="mdc-list-item" data-value="grains">
          <span class="mdc-list-item__text">
            Bread, Cereal, Rice, and Pasta
          </span
        </li>
        <li class="mdc-list-item" data-value="vegetables">
          <span class="mdc-list-item__text">
            Vegetables
          </span>
        </li>
        <li class="mdc-list-item" data-value="fruit">
          <span class="mdc-list-item__text">
            Fruit
          </span>
        </li>
      </ul>
    </div>
    
  </div>

</body>

</html>
benvc
  • 14,448
  • 4
  • 33
  • 54
  • Yeah, you're totally right. Weird. Thanks for the advice—I'll start hunting. – Paulo Costa Jun 29 '18 at 05:51
  • I actually ran into this too and I don't know what's wrong :( I'm not able to find any extra CSS in the Chrome Inspector – Sticky Aug 05 '18 at 05:18
  • 1
    @Sticky Actually, my issue ended up being in my json (`package.json` and `package-lock.json`) files, and the versions they were calling upon. I lowered the version from `0.36` to `0.35.2` and now everything seems okay. – Paulo Costa Aug 13 '18 at 18:53
  • 1
    Turns out it was due to some conflicts with another css package - `bootstrap-sassy` – Sticky Aug 13 '18 at 19:54
1

I just added this code to solve this problem:

.mdc-select__native-control {
    -webkit-appearance: none;
    -moz-appearance: none;
}

I have found out that this problem occures only if you use MDC from Node.js modules. The class .mdc-select__native-control in MDC Node modules does not contain two properties above. Although they are present in material-components-web.min.css from CDN.

ariecx
  • 11
  • 1