Topic: mdb-select label alignment and display issue

ionyx pro asked 5 years ago


Hello

I recently upgraded to MDB PRO 4.6.1 and now the select boxes are having label issues.  When I first updated, the label was sitting directly on-top of the drop down element, so was not readable.  Part A below is the original code that was working before.

Part B is the updated code, which now displays the label correctly above the dropdown area, however, the label is hard-left aligned so it does not align with the start of the dropdown box on the left hand side, but sits above and to the left.

So in the code below, address 4 is aligned correctly with a padding on the left, where as the label for "country" is hard left on the edge of the card content area.

What is the correct way to load the mdb-select element in a form such as this?  I tried quite  few combinations from the examples, but nothing I could see worked.

If I update the CSS for .select-wrapper+label to include "left:14px;" it does bring the label in. Does that element require a left attribute?

Thanks for your help! 

The form sits inside a "tab-content card" element as you can see below:

 

 

 

<!-- PART A-->
<!-- Tab panels -->
<div class="tab-content card">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel_Profile" role="tabpanel">
<div class="md-form">
<label for="address4">Address 4</label>
<input id="address4" name="address4" type="text" class="form-control" value="">
</div>
<div class="md-form">
<select id="country" name="country" class="mdb-select" searchable="Search here..">
<option value="AU">Australia</option>
</select>
<label for="country">Country</label>
</div>

...

<!-- PART B -->
<div class="md-form">
<label for="address4">Address 4</label>
<input id="address4" name="address4" type="text" class="form-control" value="">
</div>
<div class="row">
<div class="col">
<select id="country" name="country" class="mdb-select md-form" searchable="Search here..">
<option value="AU">Australia</option>
</select>
<label for="country">Country</label>
</div>
</div>

...


 


Marta Wierzbicka staff answered 5 years ago


Hi,

remove a class .md-form from this line <form class="needs-validation md-form">.

Best,
Marta

ionyx pro answered 5 years ago


Hi Marta

I see it working in your snippet, thank you, but when I make changes to my snippet or on site, it does not work for me.  Were there other changes besides updating the the div surrounding the select tag to use class"col-md-12" ?

Can you see what I have missed at my updated snippet : https://mdbootstrap.com/snippets/jquery/ionyx/267042

Cheers

 


Marta Wierzbicka staff answered 5 years ago


ionyx pro answered 5 years ago


Hi Marta

Thanks for that.  Yes, that seems to work, but I find it easier to update the CSS with the update for ".select-wrapper+label", rather than adding the ml-3 class to all labels for selects on the site. If you reload my snippet I have added in my CSS fix - anything wrong with that CSS fix you can see?

I was thinking I may have done something wrong with the row can col DIVs I had to add to get the select box to show properly in the form.  So can you confirm that my DIV structure is correct? 

Thanks for your help.


Marta Wierzbicka staff answered 5 years ago


ionyx pro answered 5 years ago


Hi Marta

ok, please check this snippet:

https://mdbootstrap.com/snippets/jquery/ionyx/267042

cheers


Marta Wierzbicka staff answered 5 years ago


Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? It is the best way to see very quickly where is an issue and possibility to fix it.

Best,

Marta



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 jQuery
  • MDB Version: 4.5.15
  • Device: Mac
  • Browser: Chrome
  • OS: MacOs
  • Provided sample code: Yes
  • Provided link: No