Search code examples
htmlmaterial-designmaterial-componentsmdc-componentsmaterial-components-web

MDC Textfield Boxes Not Rendering Properly

I have created a simple MDC Card with some MDC Textfield buttons on it. However the textfield boxes are not rendering properly. As you can see from the image below, there are gaps in the top right and left corners. Below is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Card 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 rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>

<body>

    <div class="mdc-card">
        <div class="">
            <div class="card-header">
                <div class="mdc-card__actions">
                    <div class="mdc-text-field mdc-text-field--box username">
                        <input type="text" class="text-field--outlined" id="username-input" name="username" required>
                        <label class="mdc-floating-label" for="username-input">Email</label>
                        <div class="mdc-line-ripple"></div>
                    </div>
                </div>
                <div class="mdc-card__actions">
                    <div class="mdc-text-field mdc-text-field--box password">
                        <input type="password" class="text-field--outlined" id="password-input" name="password" required minlength="8">
                        <label class="mdc-floating-label" for="password-input">Password</label>
                        <div class="mdc-line-ripple"></div>
                    </div>
                </div>
            </div>
            <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>

</html>

enter image description here

Solution

  • There are several issues with your code:

    • You are missing the mdc-text-field__input class on the input elements within your text fields, as indicated in the documentation.
    • You have a text-field--outlined class on your input elements, but this is most likely not doing anything. If you want to use the outlined variant, the correct markup can also be found in the documentation. Note that it has more markup than the filled (box) variant.
    • You are not instantiating JavaScript components for these text fields, which is necessary for it to fully function.

    I would also advise against using mdc-card__actions the way you are using it, as it's really intended for use at the bottom of a card (one use per card).

    Here's an example of markup that works, for the filled (box) variant:

    <div class="mdc-card">
  <div>
    <div class="mdc-text-field mdc-text-field--box username">
      <input class="mdc-text-field__input" type="text" id="username-input" name="username" required>
      <label class="mdc-floating-label" for="username-input">Email</label>
      <div class="mdc-line-ripple"></div>
    </div>
  </div>
  <div>
    <div class="mdc-text-field mdc-text-field--box password">
      <input class="mdc-text-field__input" type="password" id="password-input" name="password" required minlength="8">
      <label class="mdc-floating-label" for="password-input">Password</label>
      <div class="mdc-line-ripple"></div>
    </div>
  </div>
</div>

    And here's JS to instantiate the two text fields (or any number of them):

    [].forEach.call(document.querySelectorAll('.mdc-text-field'), function(el) {
  mdc.textField.MDCTextField.attachTo(el);
});