Сделать вспомогательный текст под текстовым полем MDC

У меня возникла проблема, когда вспомогательный текст для текстового поля не отображается под текстовым полем. Похоже, далеко слева.

https://s tackru.com/images/6d60df74556b07376584633d777f7997cb3eb9ed.png

На самом деле это должно быть похоже на следующее изображение:

https://s tackru.com/images/543d2eb41660efcf97261821eb0f91710a88e2c1.png

HTML и CSS для моей страницы выглядит следующим образом:

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>

Куда я иду не так?

Источник

2 ответа

Решение

Вы хотите добавить align-items:center; на ваш .container элемент. Это центрирует гибкие элементы, не растягивая их до размера гибкого контейнера.

альтернативно align-items:flex-start; а также align-items:flex-end; разместит гибкие элементы либо в начале, либо в конце гибкого контейнера. Просто если вы искали другое расположение.

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>

Источник

Может быть, вы пропустили точку здесь: если вы хотите перейти к родителю каталога, который вы используете.. так это будет выглядеть так:

И без добавления этого CSS он работает отлично:

     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>
</html>
Источник
Другие вопросы по тегам