Topic: Select Floating Label Alignment Issue
brian03 priority asked 11 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:
Kamila Pieńkowska staff answered 11 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 11 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 11 months ago
You can provide value for 'valid feedback' that looks empty:
data-mdb-valid-feedback=" "
brian03 priority commented 11 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 11 months ago
Unfortunately, we do not provide dates or content for future releases beforehand.
Kamila Pieńkowska staff commented 11 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 11 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 11 months ago
No, custom JS is the only available solution.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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