CODEWITHSUNDEEP
javascripthtmlcssmaterial-designmaterial-components-web
user3248346
user3248346

Reputation:

Material Design Component Text Field's Label Does Not Float To Top Left

I'm following the Material Design Tutorials here. The tutorial follows a Node JS approach and makes use of npm to install the material design components. This is fine and I get the MDC 101 project running exactly as in the tutorial. The text box label floats nicely to the top left as soon as I start entering in the text as shown at the bottom of the page here.

However, I want to use the Material Design Components in my Scala Play web service and so I inserted the CSS link and JS scripts into my webpage (code below) as described here. The HTML for my page looks like this:

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

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <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>

<form action="home.html">
    <div class="mdc-text-field mdc-text-field--box username">
        <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
        <label class="mdc-floating-label" for="username-input">Username</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="mdc-text-field mdc-text-field--box password">
        <input type="password" class="mdc-text-field__input" 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 class="button-container">
        <button type="button" class="mdc-button cancel">
            Cancel
        </button>
        <button class="mdc-button mdc-button--raised next">
            Next
        </button>
    </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>
</html>

If you render this in the browser, it can seen that whilst the MDC Text Fields are displayed, the labels do not float like in the tutorial example running under Node.

What am I missing here? I suspect it is something to do with some Javascript not getting activated (Javascript noob here)

Upvotes: 5

Views: 6559

Answers (3)

Keir Finlow-Bates
Keir Finlow-Bates

Reputation: 1053

This Jquery is a terrible kludge that I'm not proud of, but it does work and doesn't require the import statement.

<script type="text/javascript">
 $(document).ready(function() { 
   $("#user-input").val("Player One");
   $("label[for='user-input']").addClass("mdc-floating-label--float-above");
   $("#user-input").focus();
   $("#user-input").blur();
 });
</script>

It sets the value, adds the class required to make the label float, and then quickly adds and removes focus to the text field, which triggers the outline code in MDC to remove the outline notch.

Upvotes: 0

benvc
benvc

Reputation: 15120

You need to instantiate the MDC textfield component. One quick and dirty way to do that is to just add a script tag to your html with the following JavaScript.

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

Upvotes: 10

Hakim
Hakim

Reputation: 3437

For future visitors who followed the official getting started guide to install MDC with webpack, what worked for me is simply to add initialize the TextField in the JS file bundled (as mentioned in the docs):

import {MDCTextField} from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

Upvotes: 2

Related Questions