Form ionic

[jeandemagny]

Hi,

I try to design a form like the one below

• the first input (From - Départ) to set the starting location
• the second input (To - Arrivée) to set the ending location
• On the right (double arrows) to change the order of the two location mentionned above
• Then 3 buttons below.

Result I would like to get :

And here is my result :

Here is my code :

So nothing is centered …

<ion-grid>          
<form >          
<ion-row>            
<ion-col col-9 >                                  
<ion-list>                                  
<ion-item>                        
<ion-label fixed>From</ion-label>                        
<ion-input color="grey" type="text"  placeholder="adress 1" >
</ion-input>                     
 </ion-item>                                          
<ion-item>                        
<ion-label fixed>To</ion-label>                        
<ion-input  type="text" placeholder="adress 2" >
</ion-input>                      
</ion-item>                    
</ion-list>                                 
</ion-col>            
<ion-col col-2 >                
<button  ion-button small ion-button icon-only>                    
<ion-icon name="md-shuffle">
</ion-icon>                  
</button>            
</ion-col>          
</ion-row>          
<ion-row>              
<ion-col col-12 >                  
<button  ion-button small ion-button icon-left>                      
<ion-icon name="md-home">
</ion-icon>                      
Maison                    
</button>                                                          
<button  ion-button small ion-button icon-left>                        
<ion-icon name="md-briefcase"></ion-icon>                    
Travail                    
</button>                                                         
<button  ion-button small ion-button icon-left>                     
 <ion-icon name="md-walk"></ion-icon>                      
RDV                    
</button>
               
 </ion-col>          
</ion-row>       
 </form>         
</ion-grid>    

[jaydz]

I think, even with the pre-designed ion-row and columns, you still have to do some work in your scss file for that component and set

display: flex;
flex-direction: row;
justify-content: center; //or some other option