Forms labels overlap on validation

Topic: Forms labels overlap on validation

demzl25 priority asked 6 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

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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 priority commented 6 years ago

Thanks

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

demzl25

197Support score
55Questions 2Answers 224Snippets