Label is overlapping with the selected value

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
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                                        

                                        
                                    

                                    
                                    

                                        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                                                                                    

                                                                                
                                        

                                                                                                                                                                                                                                    

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                            
                                

                                    
                                    

                                        

                                                    
                                                    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                                        

                                        
                                    

                                    
                                    

                                        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.

                                                                                     

                                                                                
                                        

                                                                                                                                                                                                                                    

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                                        
                            

                                
                                

                                    

                                        
                                        
                                        
                                        
                                    

                                

                                
                                
                                

                                    
Write

                                    
                                         Create snippet
                                    
                                

                                
                                

                                    

                                        
                                        

                                            
                                            
                                            
                                            

                                                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

                                            
        

            
    
                
  • 
                    User:
                    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
                
    • 
                
            

        

                                

                        
                                                    
                            

                                
                                
Tags

                                
                                

                                                                            select
                                                                    

                            

                            
                                                                                                    
                            

                                
                                
Related topics

                                
                                

                                                                            

                                            

                                                7
                                            

                                            

                                                Keyboard tab navigation to search field of material select is not working. Upon receiving the focus to search textbox, dropdown disappears and leaving inaccessible for a keyboard user
                                            

                                        

                                                                            

                                            

                                                2
                                            

                                            

                                                Searchable select with very large dataset
                                            

                                        

                                                                            

                                            

                                                2
                                            

                                            

                                                IE 11 Select Change Not Supported
                                            

                                        

                                                                            

                                            

                                                2
                                            

                                            

                                                Add/Remove of select options multiplies nested wrappers
                                            

                                        

                                                                            

                                            

                                                2
                                            

                                            

                                                MD Select showing HTML chars incorrectly on load
                                            

                                        

                                                                    

                            

                            
                                                                            
                            

                                
                                
About author

                                                                    
                

                            
                        

                


                    
                    

                        Manoj Wadhwa
                    

                    
                    
                    

                    
                    
                                            Pro User
                                                            
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    15Support score
                    

                    1Questions
                    1Answers
                    

                    
                    

                    0Snippets likes
                    0Snippets