Make Helper Text Appear Below MDC Text field

Question

I am having an issue where the helper text for a text field is not appearing below the text field. It appears to the far left.

It should actually be like the following image:

The HTML and CSS for my page is as follows:

html, body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.container {
  display: flex;
  flex-direction: column;
}

.container > div {
  padding: 10px;
}

.button-container button {
  margin-right: 30px;
  margin-top: 10px;
}


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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auth.X</title>
    <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@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="./employment.css">
</head>

<body>

<div class="container">
    <div class="test-container">
        <div class="mdc-text-field mdc-text-field--outlined test">
            <input type="text" id="tf-outlined-test" class="mdc-text-field__input">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="tf-outlined-test" class="mdc-floating-label">Test Field</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <div class="mdc-text-field-helper-line">
            <div class="mdc-text-field-helper-text">helper text</div>
        </div>
    </div>

</div>

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

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

</script>

</body>

Where am I going wrong?

jleggio · Accepted Answer · 2019-02-14T22:16:50.903

You'll want to add align-items:center; to your .container element. This centers the flex items without stretching them to the size of the flex container.

Alternatively align-items:flex-start; and align-items:flex-end; will position the flex items at either the start or the end of the flex container. Just incase you were looking for a different positioning.

html, body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.container {
  display: flex;
  flex-direction: column;
  align-items:center;
}

.container > div {
  padding: 10px;
}

.button-container button {
  margin-right: 30px;
  margin-top: 10px;
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auth.X</title>
    <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@latest/dist/material-components-web.min.css">
    <link rel="stylesheet" href="./employment.css">
</head>

<body>

<div class="container">
    <div class="test-container">
        <div class="mdc-text-field mdc-text-field--outlined test">
            <input type="text" id="tf-outlined-test" class="mdc-text-field__input">
            <div class="mdc-notched-outline">
                <div class="mdc-notched-outline__leading"></div>
                <div class="mdc-notched-outline__notch">
                    <label for="tf-outlined-test" class="mdc-floating-label">Test Field</label>
                </div>
                <div class="mdc-notched-outline__trailing"></div>
            </div>
        </div>
        <div class="mdc-text-field-helper-line">
            <div class="mdc-text-field-helper-text">helper text</div>
        </div>
    </div>

</div>

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

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

</script>

</body>

No that doesn't work. If it works for you can you post the full CSS — , Feb 14 '19 at 21:56

Make Helper Text Appear Below MDC Text field

1 Answers1