Field Size Increases Upon Validation Check

Topic: Field Size Increases Upon Validation Check

folliejester asked 3 years ago

Expectations : https://i.imgur.com/eVWgBMZ.png

Happening : https://i.imgur.com/TwaigsM.png

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

Add comment

Michał Duszak staff answered 3 years ago

0 0 Best answer

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/

Add comment

Write

Create snippet

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

folliejester

40Support score
3Questions 2Answers

0Snippets likes 2Snippets