Topic: Forms labels overlap on validation

demzl25 pro asked 5 years ago


Hi on my md-form  labels overlap errors  on the input fields on validation here is link to image to show this issue! Any help would be appreciated, thank you! https://www.dropbox.com/s/zkm4b1dz0jaeqfe/2018-06-17_203227.jpg?dl=0

Marta Wierzbicka staff answered 5 years ago


Hi, we will fix this in the next release in our code, but for now, I can recommend you something like in this form:
<!-- Material form login -->
<form>
<p class="h4 text-center mb-4">Sign in</p>

<!-- Material input email -->
<div class="md-form mb-5">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="materialFormLoginEmailEx" class="form-control validate">
<label data-error="wrong" data-success="right" for="materialFormLoginEmailEx">Your email</label>
</div>

<!-- Material input password -->
<div class="md-form mb-5">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="materialFormLoginPasswordEx" class="form-control validate">
<label data-error="wrong" data-success="right" for="materialFormLoginPasswordEx">Your password</label>
</div>

<div class="text-center mt-4">
<button class="btn btn-default" type="submit">Login</button>
</div>
</form>
<!-- Material form login -->
Best, Marta

demzl25 pro commented 5 years ago

Thanks


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags