Topic: Field Size Increases Upon Validation Check
Expectations : https://i.imgur.com/eVWgBMZ.png
Happening : https://i.imgur.com/TwaigsM.png
Code : https://pastebin.com/K5ebXEgw
Snippet : https://mdbootstrap.com/snippets/standard/rajorshi_ghosh/3436977
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="fullname" name="fullname" class="form-control" required/>
<label class="form-label" for="fullname">Full Name</label>
<div class="invalid-feedback">Please type your full name</div>
</div>
</div>
Hello, it happens because of display: flex in this element. See class d-flex here:
<div class="d-flex flex-row align-items-center mb-4">
<i class="fas fa-user fa-lg me-3 fa-fw"></i>
<div class="form-outline flex-fill mb-0">
<input type="text" id="fullname" name="fullname" class="form-control" required/>
<label class="form-label" for="fullname">Full Name</label>
<div class="invalid-feedback">Please type your full name</div>
</div>
</div>
Try positioning it with our Grid system: https://mdbootstrap.com/docs/standard/layout/grid/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Desktop Computer
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes