Topic: Label is overlapping with the selected value

Manoj Wadhwa pro asked 6 years ago


Select control's label is overlapping with the selected option.
It's the same behavior on mdboostrap website too. I didn't do anything special, just copied pasted sample code in my angular component's .html file.
                      <div class="col-md-4">

                          <div class="md-form">

                              <mdb-select [options]="genderSelect" placeholder="Gender" id="gender" name="gender"></mdb-select>

                              <label for="gender" class="">Gender</label>

                          </div>

                      </div>

                
                  

Manoj Wadhwa pro commented 6 years ago

https://snag.gy/AKulZa.jpg

Arkadiusz Idzikowski staff answered 6 years ago


We are already aware of the problem with alignment of different form elements. It should be fixed in the new version of MDB Angular. For now you would need your own styles.  

Manoj Wadhwa pro answered 6 years ago


Thanks Arek.. It worked.. but the alignment goes off... Wrapping the select control in div.md-form, results in label transition and overlap issue. The other two input controls need to be wrapped in div.md-form for them to have their material UI behavior work. Here is the screenshot.. https://snag.gy/FA9gkl.jpg
                    <div class="row">

                      <div class="col-md-4">

                          <div class="md-form">

                              <input type="text" class="form-control" id="firstname" mdbInputDirective>

                              <label for="firstname">First Name</label>

                            </div>

                      </div>

                      <div class="col-md-4">

                          <div class="md-form">

                              <input type="text" class="form-control" id="lastname" mdbInputDirective>

                              <label for="lastname">Last Name</label>

                            </div>

                      </div>

                      <div class="col-md-4">

                          <mdb-select [options]="genderSelect" placeholder="Gender"></mdb-select>

                          <label>Gender</label>

                      </div>

                    </div>

Arkadiusz Idzikowski staff answered 6 years ago


Dear Manoj Wadhwa, Try this code:
<div class="row">

<divclass="col-md-6">

<mdb-select [options]="genderSelect"placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</div>

</div>
Regards, Arek

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No