Topic: Select Floating Label Alignment Issue

brian03 priority asked 10 months ago


Expected behavior I expect the Select field label and success message to behave like an input field.

Actual behavior The Select successful validation has label overwriting field border. Please see the screen shot I included below. I would also like to know how to remove the validation message below the field. Please let me know if you need my full code file, I provided a snippet below.

Resources (screenshots, code snippets etc.) This is the second step from my Stepper:

<!-- Owner Information -->
            <div class="container mb-2">
              <div class="row row-cols-1 row-cols-sm-2 g-3">

                <div class="col">
                  <div class="form-outline" data-mdb-input-init>
                    <input type="text" id="stepper-form-owner-first-name" class="form-control" required/>
                    <label class="form-label" for="stepper-form-owner-first-name">First name<small class="text-muted"></small></label>
                    <div class="invalid-feedback">Invalid first name</div>
                  </div>
                </div>

                <div class="col">
                  <div class="form-outline" data-mdb-input-init>
                    <input type="text" id="stepper-form-owner-last-name" class="form-control" required/>
                    <label class="form-label" for="stepper-form-owner-last-name">Last name<small class="text-muted"></small></label>
                    <div class="invalid-feedback">Invalid last name</div>
                  </div>
                </div>

                <div class="col">
                  <div class="form-outline" data-mdb-input-init>
                    <input type="text" id="stepper-form-owner-email-address" class="form-control" required/>
                    <label class="form-label" for="stepper-form-owner-email-address">Email Address<small class="text-muted"></small></label>
                    <div class="invalid-feedback">Invalid email address</div>
                  </div>
                </div>

                <div class="col">
                  <div class="form-outline col" data-mdb-input-init>
                    <input type="text" id="stepper-form-owner-phone-number" class="form-control" required/>
                    <label class="form-label" for="stepper-form-owner-phone-number">Phone Number</label>
                    <div class="invalid-feedback">Invalid phone number</div>
                  </div>
                </div>

                <div class="col">
                  <div class="form-outline" data-mdb-input-init>
                    <input type="text" id="stepper-form-owner-drivers-license-number" class="form-control" required/>
                    <label class="form-label" for="stepper-form-owner-drivers-license-number">Drivers License Number</label>
                    <div class="invalid-feedback">Invalid drivers license number</div>
                  </div>
                </div>

                <div class="col">
                  <select class="custom-select validate"
                                    data-mdb-select-init
                                    data-width="auto"
                                    id="drivers-license-state"
                                    data-mdb-filter="true"
                                    data-mdb-validation="true"
                                    data-mdb-invalid-feedback="Invalid state issued in">
                        <option value="" hidden selected></option>
                        <option value="1">Alabama</option>
                        <option value="2">Alaska</option>
                        <option value="3">Arizona</option>
                        <option value="4">Massachusetts</option>
                        <option value="5">New Hampshire</option>
                        <option value="6">North Carolina</option>
                        <option value="7">South Carolina</option>
                        <option value="8">Wyoming</option>
                  </select>
                    <label class="form-label select-label">State Issued In</label>
                </div>

              </div>

Screen shot: Floating Label Display Issue


Kamila Pieńkowska staff answered 10 months ago


It's a bug with using validation and hidden first value at the same time. We will fix this as soon as possible.


brian03 priority commented 10 months ago

Thanks Kamila, I will remove hidden for now. Is there a way for me to remove the "Valid" text that shows below the Select?


Kamila Pieńkowska staff commented 10 months ago

You can provide value for 'valid feedback' that looks empty: data-mdb-valid-feedback=" "


brian03 priority commented 10 months ago

Do you have a date on when the bug with using validation and hidden first value at the same time will be resolved? I cannot go live with this issue. Thanks!


Kamila Pieńkowska staff commented 10 months ago

Unfortunately, we do not provide dates or content for future releases beforehand.


Kamila Pieńkowska staff commented 10 months ago

But as a workaround, you may want to substitute Select with Autocomplete. https://mdbootstrap.com/docs/standard/forms/autocomplete/#section-validation


brian03 priority commented 10 months ago

I got the Autocomplete to work except now the user can enter any data, they are not restricted to the values in the array. Other than custom JS is there a way to restrict the user to only select a value from the array?


Kamila Pieńkowska staff commented 10 months ago

No, custom JS is the only available solution.



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No