Forms labels overlap on validation

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Forms labels overlap on validation

demzl25 pro premium priority asked 7 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 Szymanska staff pro premium answered 7 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 premium priority commented 6 years ago

Thanks
Write
Create snippet
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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
demzl25
Pro User Premium support
197Support score
55Questions 2Answers
2Snippets likes 224Snippets