У меня проблема, когда вспомогательный текст для текстового поля не отображается под текстовым полем. Он кажется крайним левым.
На самом деле это должно быть похоже на следующее изображение:
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>
Где я ошибаюсь?
