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 6 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 6 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

              

              

                
    
                  
  • 
                    ForumUser:
                    
                      Pro
                    
                  
    • 
                  
  • 
                    Premium support:
                    
                      No
                    
                  
    • 
                  
  • 
                    Technology:
                    
                      MDB Angular
                    
                  
    • 
                  
  • 
                    MDB Version:
                    
                      -
                    
                  
    • 
                  
  • 
                    Device:
                    
                      -
                    
                  
    • 
                  
  • 
                    Browser:
                    
                      -
                    
                  
    • 
                  
  • 
                    OS:
                    
                      -
                    
                  
    • 
                  
  • 
                    Provided sample code:
                    
                      No
                    
                  
    • 
                  
  • 
                    Provided link:
                    
                      No
                    
                  
    • 
                

              

              

              
              
                
                

                  
                  
Tags

                  

                  
                  

                    
                  

                

                
              

              
              
                
                

                  
                  
About author

                  

                  
                  

                    
                  

                  

                    
                    

                      
                        Garrido
                      
                    

                    
                    
                    Pro User
                    
                    

                    
                    
                      10Support score
                    
                    

                    
                      2Questions
                    
                    
                      1Answers
                    

                    
                    
                      0Snippets