Сделать вспомогательный текст под текстовым полем MDC - PullRequest
Новая
       33

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

0 голосов
/ 14 февраля 2019

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

enter image description here

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

enter image description here

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 ]

0 голосов
/ 14 февраля 2019

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

И без добавления этого 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>
0 голосов
/ 14 февраля 2019

Вы хотите добавить 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>
...