0
votes

Diminution de la hauteur et de l'espacement de la rangée sous forme de vuety

J'essaie de créer un formulaire à l'aide de Vuetify qui est essentiellement, reproduit ce formulaire.

J'ai essayé d'utiliser la grille Vuetify et des colonnes après beaucoup de tentatives que j'ai à cette

Je veux réduire la hauteur des entrées ainsi que l'espacement entre les lignes.

Code en direct Snippet https://codepen.io/ijunaid8088/pen/xxgzzgv < / p>


                        
                        
                            
                                                                    css
                                                                    vue.js
                                                                    vuetify.js
                                                            
                        
                                                    
                            
                            
                                6 commentaires
                                
                                                                            Est-il possible de créer un exemple de travail à partir de votre code tout ce qui me semble bien?
                                        
                                                                            Oui sûr, j'ajoute un
                                        
                                                                            Mon problème est que je souhaite réduire la hauteur des entrées et je souhaite réduire l'espace en haut et au-dessous de chaque rangée.
                                        
                                                                            Je vous ai eu un problème mais j'ai besoin d'un exemple de travail pour la fixer, je dirais à peu près sa marge qui provoque la hauteur de la section d'entrée
                                        
                                                                            Mise à jour avec LIVE LIEN
                                        
                                                                            Le problème est que vous utilisez Col et Conteneur pour lequel il y a un rembourrage à venir, êtes-vous autorisé à utiliser  flex



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous devez remplacer les valeurs de rembourrage (et / ou de marge) sur les éléments appropriés. 
 Je vous recommande de placer une classe  code> ou  ID  code> sur un ancêtre commun de tous les champs que vous souhaitez modifier ( entrées-conteneur-conteneur  code> classe sur    code>, dans l'exemple ci-dessous), ce qui vous permet de cibler uniquement les entrées à l'intérieur de cet élément, de sorte que vous ne modifiez pas toutes les entrées de votre application:  P> 
.inputs-container {
  .col-12 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .theme--light.v-input {
    padding-top: 0;
  }
  .v-input__slot {
    margin-bottom: 0;
  }
}

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                    
   meilleure solution possible sans modification des styles de bibliothèque par défaut 

      
    
      
        
          
            
              Ajouter une caméra IP
            
          
        
        
          
    
      
        
          

 

  
          
  xxx                                  

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Vous pouvez utiliser "dense" pour le faire. Exemple indiqué ci-dessous.  XXX                                  

                                                                    
                                    
                                    
                                        0 commentaires