Форма MDBootsrap Ввод текста и ярлык с перекрытием не работает должным образом - PullRequest
Новая
       5

Форма MDBootsrap Ввод текста и ярлык с перекрытием не работает должным образом

1 голос
/ 13 февраля 2020

Я пытаюсь добавить материал дизайна bootstrap Форма входа от здесь .

Форма отображается так:

login screen

Но когда я нажимаю на один из элементов управления вводом, текст перекрывается, и метка не перемещается над полем ввода, как ожидалось.

Вот ожидаемый результат :

enter image description here

А вот фактический результат

enter image description here

Здесь мой HTML: 

<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">

  <!-- Email -->
  <div class="md-form">
    <input type="email" id="materialLoginFormEmail" class="form-control">
    <label for="materialLoginFormEmail">E-mail</label>
  </div>

  <!-- Password -->
  <div class="md-form">
    <input type="password" id="materialLoginFormPassword" class="form-control">
    <label for="materialLoginFormPassword">Password</label>
  </div>

  <div class="d-flex justify-content-around">
    <div>
      <!-- Forgot password -->
      <a href="">Forgot password?</a>
    </div>
  </div>

  <!-- Sign in button -->
  <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign
    in</button>

  <!-- Register -->
  <p>Not a member?
    <a href="">Register</a>
  </p>

</form>
<!-- Form -->

А вот некоторые значения в моем angular. json: 

"styles": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "./node_modules/quill/dist/quill.core.css",
          "./node_modules/quill/dist/quill.snow.css",
          "node_modules/animate.css/animate.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.min.js",
          "./node_modules/quill/dist/quill.js"
        ]

Может кто-нибудь подскажите пожалуйста что мне не хватает, и почему форма не работает, как ожидалось? Я скопировал код именно из учебника, на который я ссылался выше.

1 Ответ

1 голос
/ 14 февраля 2020

Вы используете jQuery код, здесь MDB Angular версия:

https://mdbootstrap.com/docs/angular/forms/basic/

Чтобы этикетка работала правильно, вам необходимо добавить mdbInput директива для элемента ввода.

...