Topic: Label overlap on validation
Using code below, validation errors overlap the input fields.
Any help would be appreciated, thank you!
<form action="/register" method="post" id="frmRegister">
<divclass="modal-body">
<divclass="md-form form-sm">
<iclass="fa fa-user-circle prefix"></i>
<inputclass="form-control form-control-sm validate"id="registerFirstName"type="text"name="firstName"value="{{old('firstName', '') }}">
<labelfor="registerFirstName" data-error="Error">First Name</label>
</div>
<divclass="md-form form-sm">
<iclass="fa fa-user-circle-o prefix"></i>
<inputclass="form-control form-control-sm validate"id="registerLastName"type="text"name="lastName"value="{{old('lastName', '') }}">
<labelfor="registerLastName">Last Name</label>
</div>
<divclass="md-form form-sm">
<iclass="fa fa-envelope prefix"></i>
<inputclass="form-control form-control-sm validate"id="registerEmail"type="text"name="email"value="{{old('email', '') }}">
<labelfor="registerEmail">Email address</label>
</div>
<divclass="md-form form-sm">
<iclass="fa fa-lock prefix"></i>
<inputclass="form-control form-control-sm validate"id="registerPassword"type="password"name="password">
<labelfor="registerPassword">Password</label>
</div>
<divclass="md-form form-sm">
<iclass="fa fa-unlock-alt prefix"></i>
<inputclass="form-control form-control-sm validate"id="registerPasswordRepeat"type="password"name="password_confirmation">
<labelfor="registerPasswordRepeat">Repeat password</label>
</div>
<divclass="text-center form-sm mt-2">
<buttonclass="btn btn-info"data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing signup">Sign up</button>
</div>
</div>
</form>
Add comment
Hi,
could you send me your whole index.html file to m.szymanska@mdboostrap.com? I'll try to help.
Best,
Marta
rynoster commented 7 years ago
Thank you Marta, email has been sent.rynoster commented 7 years ago
Hi Marta, Any update here perhaps?Marta Szymanska staff pro premium commented 7 years ago
Could you remind me your email address from which you sent me a message?rynoster commented 7 years ago
I have resent the email.Marta Szymanska staff pro premium commented 7 years ago
On which email address did you send the message? I still don't have any message from you. This is my e-mail address: m.szymanska@mdbootstrap.com.rynoster commented 7 years ago
Sorry not comfortable sharing my personal email address on the internet for bots to scrape. I have shared on pastebin - https://pastebin.com/ktik6Thdrynoster commented 7 years ago
Any help here please? I'm close to purchase pro version but for me this is big issue.rynoster commented 7 years ago
Any help here please? I'm close to purchase pro version but for me this is big issue.
Hi,
try your code now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title>Home | Title</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.1/css/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Collapse button -->
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#modalRegisterSuccess" data-toggle="modal">modal</a>
</li>
</ul>
<ul class="navbar-nav mr-1">
<li class="nav-item">
<a class="nav-link" data-target="#modalLR" data-toggle="modal" id="aLogin">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#modalLR" data-toggle="modal" id="aRegister">Register</a>
</li>
</ul>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
<div class="view" id="intro">
<div class="full-bg-img rgba-stylish-strong container-fluid d-flex align-items-center justify-content-center">
<div class="row d-flex justify-content-center">
<div class="col-md-10 text-center">
<h2 class="display-3 font-bold white-text mb-2">Brand</h2>
<hr class="hr-light">
<h4 class="white-text my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, consectetur.</h4>
<button class="btn btn-outline-white"
type="button">Read more</button>
</div>
</div>
</div>
</div>
</header>
<!--Modal: Login / Register Form -->
<div aria-hidden="true" aria-labelledby="LoginRegisterModal" class="modal fade" id="modalLR" role="dialog" tabindex="-1">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabLogin" role="tab">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabRegister" role="tab">Register</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<div class="tab-pane fade in show active" id="tabLogin" role="tabpanel">
<!--Body-->
<form action="/login" id="frmLogin" method="post" name="frmLogin">
<input name="_csrf" type="hidden" value="LR39d8Mo-NrLCg7W_-o-l4V5CwvSDhlpsMPQ">
<div class="modal-body mb-1">
<div class="md-form form-sm mb-5">
<input class="form-control form-control-sm validate" id="loginEmail" name="email" type="email" value="">
<label for="loginEmail" data-error="Error">Email address</label>
</div>
<div class="md-form form-sm">
<input class="form-control form-control-sm validate" id="loginPassword" name="password" type="password">
<label data-error="wrong" data-success="right" for="loginPassword">Password</label>
</div>
<div class="text-center mt-2">
<button class="btn btn-info" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Logging in" type="submit">Log in</button>
</div>
</div>
</form>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p>Not a member?
<a class="blue-text" href="#" id="aRegisterInModal">Sign Up</a>
</p>
<p>
<a class="blue-text" href="#">Forgot Password?</a>
</p>
</div>
<button class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal" type="button">Close</button>
</div>
</div>
<div class="tab-pane fade" id="tabRegister" role="tabpanel">
<!--Body-->
<form action="/register" id="frmRegister" method="post" name="frmRegister">
<div class="modal-body">
<div class="md-form form-sm">
<input class="form-control form-control-sm validate" id="registerFirstName" name="firstName" type="text" value="">
<label data-error="Error" for="registerFirstName">First Name</label>
</div>
<div class="md-form form-sm">
<input class="form-control form-control-sm validate" id="registerLastName" name="lastName" type="text" value="">
<label for="registerLastName">Last Name</label>
</div>
<div class="md-form form-sm">
<input class="form-control form-control-sm validate" id="registerEmail" name="email" type="email" value="">
<label for="registerEmail">Email address</label>
</div>
<div class="md-form form-sm">
<input class="form-control form-control-sm validate" id="registerPassword" name="password" type="password">
<label for="registerPassword">Password</label>
</div>
<div class="md-form form-sm">
<input class="form-control form-control-sm validate" id="registerPasswordRepeat" name="password_confirmation" type="password">
<label for="registerPasswordRepeat">Repeat password</label>
</div>
<div class="text-center form-sm mt-2">
<button class="btn btn-info" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing signup">Sign up</button>
</div>
</div>
</form>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p>Have an account?
<a class="blue-text" data-toggle="tab" href="#tabLogin">Log In</a>
</p>
</div>
<button class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login / Register Form Demo-->
<!-- Central Modal Medium Success -->
<div aria-hidden="true" aria-labelledby="Sign up successful" class="modal fade" id="centralModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Sign up successful</p>
<button aria-label="Close" class="close" data-dismiss="modal" type="button">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
<h3>Thank you for your registration</h3>
<p>In order for us to ensure we can contact you in future, we please need you to verify the email address you have
just entered. You will receive an email momentarily, please click on the link to verify your email address
accordingly.
</p>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a class="btn btn-outline-success waves-effect" data-dismiss="modal" type="button">Close</a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Central Modal Medium Success-->
<main class="mt-5">
<div class="container">
<section class="text-center" id="features">
<h2 class="mb-4 font-weight-bold">Features</h2>
<div class="row d-flex justify-content-center mb-4">
<div class="col-md-8">
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit ad minus atque odio quis. Similique.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 mb-5">
<h4 class="my-4 font-weight-bold">Experience</h4>
<p class="grey-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, iure voluptate sapiente similique consequuntur
consectetur.</p>
</div>
<div class="col-md-4 mb-5">
<h4 class="my-4 font-weight-bold">Happiness</h4>
<p class="grey-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, iure voluptate sapiente similique consequuntur
consectetur.</p>
</div>
<div class="col-md-4 mb-5">
<h4 class="my-4 font-weight-bold">Adventure</h4>
<p class="grey-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, iure voluptate sapiente similique consequuntur
consectetur.</p>
</div>
</div>
</section>
<hr class="my-5">
<section id="examples">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="view overlay z-depth-1-half">
<img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg">
<div class="mask rgba-white-slight"></div>
</div>
<h4 class="my-4 font-weight-bold">Heading</h4>
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="view overlay z-depth-1-half">
<img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg">
<div class="mask rgba-white-slight"></div>
</div>
<h4 class="my-4 font-weight-bold">Heading</h4>
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="view overlay z-depth-1-half">
<img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/29.jpg">
<div class="mask rgba-white-slight"></div>
</div>
<h4 class="my-4 font-weight-bold">Heading</h4>
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="view overlay z-depth-1-half">
<img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/10.jpg">
<div class="mask rgba-white-slight"></div>
</div>
<h4 class="my-4 font-weight-bold">Heading</h4>
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="view overlay z-depth-1-half">
<img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/11.jpg">
<div class="mask rgba-white-slight"></div>
</div>
<h4 class="my-4 font-weight-bold">Heading</h4>
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="view overlay z-depth-1-half">
<img alt="" class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/13.jpg">
<div class="mask rgba-white-slight"></div>
</div>
<h4 class="my-4 font-weight-bold">Heading</h4>
<p class="grey-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae voluptates, neque harum impedit hic obcaecati!</p>
</div>
</div>
</section>
<hr class="my-5">
<section id="gallery">
<h2 class="mb-5 font-weight-bold text-center">Gallery</h2>
<div class="row">
<div class="col-md-6 mb-4">
<!--Carousel Wrapper-->
<div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-example-1z">
<!--Indicators-->
<ol class="carousel-indicators"></ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner z-depth-1-half" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<img alt="First slide" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg">
</div>
<!--/First slide-->
<!--Second slide-->
<div class="carousel-item">
<img alt="Second slide" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg">
</div>
<!--/Second slide-->
<!--Third slide-->
<div class="carousel-item">
<img alt="Third slide" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg">
</div>
<!--/Third slide-->
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" data-slide="prev" href="#carousel-example-1z" role="button">
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carousel-example-1z" role="button">
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->
</div>
<div class="col-md-6">
<a class="teal-text" href="">
<h6 class="pb-1">
<strong>Lifestyle</strong>
</h6>
</a>
<h4 class="mb-3">
<strong>This is title of the news</strong>
</h4>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat
facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.</p>
<p>by
<a>
<strong>Jessica Clark</strong>
</a> , 26/08/2016</p>
<a class="btn btn-primary btn-md">Read more</a>
</div>
</div>
</section>
<hr class="my-5">
<section id="contact">
<h2 class="mb-5 font-weight-bold text-center">Contact us</h2>
<div class="row">
<div class="col-lg-5 col-md-12 mb-5">
<form action="" class="p-5">
<div class="md-form form-sm">
<input class="form-control" id="input-1" name="input-1" type="text">
<label for="input-1">Your name</label>
</div>
<div class="md-form form-sm">
<input class="form-control" id="input-2" name="input-2" type="email">
<label for="input-2">Email</label>
</div>
<div class="md-form form-sm">
<input class="form-control" id="input-3" name="input-3" type="text">
<label for="input-3">Subject</label>
</div>
<div class="md-form form-sm">
<textarea class="md-textarea" id="input-4" name="input-4" style="height: 100px" type="text"></textarea>
<label for="input-4">Your message</label>
</div>
<div class="text-center">
<button class="btn btn-unique">Send</button>
</div>
</form>
</div>
<div class="col-lg-7 col-md-12 mb-5">
<div class="row text-center">
<div class="col-md-4 mb-3">
<p>Roan Crescent</p>
</div>
<div class="col-md-4 mb-3">
<p>Corporate Park North</p>
</div>
<div class="col-md-4 mb-3">
<p>123 456 7890</p>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="page-footer font-small blue pt-4 mt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6">
<h5 class="text-uppercase">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<div class="col-md-6">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright py-3 text-center">
© 2018 Copyright:
</div>
</footer>
<!-- SCRIPTS -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap tooltips -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" type="text/javascript"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>
<!-- MDB core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.1/js/mdb.min.js" type="text/javascript"></script>
<script src="https://mdbcdn.b-cdn.net/app.js" type="text/javascript"></script>
</body>
</html>
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No