Field Size Increases Upon Validation Check


Topic: Field Size Increases Upon Validation Check

folliejester asked 8 months ago

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>

enter image description here


Michał Duszak staff answered 8 months ago

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/


Please insert min. 20 characters.

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 Standard
  • MDB Version: MDB5 3.9.0
  • Device: Desktop Computer
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes