Menu
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)
669
A floating label is a text label which appears inside the input field at full font-size. When interacted with, the label “floats” above, making room for the user to input a value.
Floating Labels Are Gone Surely you can save quite a bit of vertical space with them, but the cost of it has plenty of accessibility and autofill issues.
Helper text gives context about a select, such as how the selection will be used. It should be visible either persistently or only on invalid state.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
