Label is overlapping with the selected value

Topic: Label is overlapping with the selected value

Manoj Wadhwa pro asked 5 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 5 years ago

https://snag.gy/AKulZa.jpg

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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.

Add comment

Manoj Wadhwa pro answered 5 years ago

0 0 Best answer

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>
<pre class="code-toolbar grey lighten-2 p-3 mb-3">                    <div class="row">

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

</div>

</div>

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

<label>Gender</label>

</div>

</div></pre>
</div>

Please insert min. 20 characters.

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>

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

Manoj Wadhwa

Pro User 15Support score
1Questions 1Answers 0Snippets