How to place the label alongside the input text field in for

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: How to place the label alongside the input text field in forms?

Garrido pro asked 7 years ago

How can I make a form with the traditional layout where the text label is alongside the rectangular input text field on the same horizontal line, similar to this: https://imgur.com/a/n5T7j ? How can I render the input text field with a rectangular border on all four sides and the label beside it?

I don't want the default layout where the text label and the input text field (represented by a single continuous line) are stacked vertically.

I am using MDB Angular Pro v5.1.1

Thanks in advance.

Mario

Damian Gemza staff answered 7 years ago

Hello Garrido, It's not so easy to create your's desired effect, but you could use those styles. Key class here is input-alternate, that turns input to alternative version (similar to input from bootstrap). Of course you could use some class not inline styles. Feel free to adapt my solution to your's needs. 
<div class="md-form">

<label style="position: relative; top: 10px; left: 0; padding-left: 10px;">Imie</label>

<input style="margin-left: 10px; position: absolute"id="tekst"type="text"class="input-alternate">

</div>
Best Regards, Damian 


                                                                                    

                                                                                
                                        

                                                                                                                                                                                                                                    

                                                                                                            
                                                                                                    

                                                                                    

                                        
                                    

                                                                                                        

                                
                                                                                                        
                            

                                
                                

                                    

                                        
                                        
                                        
                                        
                                    

                                

                                
                                
                                

                                    
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:
                        -
                    
    • 
                                    
  • 
                        Device:
                        -
                    
    • 
                                    
  • 
                        Browser:
                        -
                    
    • 
                                    
  • 
                        OS:
                        -
                    
    • 
                                
  • 
                    Provided sample code:
                    No
                
    • 
                
  • 
                    Provided link:
                    No
                
    • 
                
            

        

                                

                        
                                                                                                                            
                            

                                
                                
About author

                                                                    
                

                            
                        

                


                    
                    

                        Garrido
                    

                    
                    
                    

                    
                    
                                            Pro User
                                                            
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    10Support score
                    

                    2Questions
                    1Answers
                    

                    
                    

                    0Snippets likes
                    0Snippets