11
votes

CSS pour la largeur des étiquettes de forme dynamique

Je travaille actuellement sur le refactoring l'un de nos contrôleurs de formulaire afin que nous puissions l'utiliser pour un site de face publique. Actuellement, il génère une disposition de table pour les formulaires, mais j'essaie de le faire en utilisant des formulaires CSS.

J'essaie de reproduire quelque chose qui ressemblerait à ce http: // www .stylephreak.com / Uploads / Source / CSSFORMS / CSSFORM.PHP

Emission Je reçois est que tous les exemples de formes CSS que je trouve semble assumer une largeur fixe pour l'étiquette de la colonne de gauche. Je n'ai aucun contrôle sur ce qui se passe dans l'étiquette dans mon cas, il provient d'une banque de traduction modifiable de l'utilisateur. Avec une table, il est super facile que je voudrais simplement utiliser WhitSpace: Nowrap; Et le label le plus long déciderait de la largeur de la TD et tout le monde est heureux.

est-il possible de faire quelque chose de similaire avec CSS? J'ai essayé d'utiliser une largeur min et de le forcer à ne pas envelopper. Cela a fonctionné mais ne pousse que le contrôle actuel à droite et baisé l'alignement, sans oublier que la min-largeur n'est pas prise en charge dans IE 6.

Est-ce vraiment si mal d'utiliser une table pour la mise en page des formes? C'est des données tabulaires et a du sens lorsque linéarisé après tout Non?

html css stylesheet webforms

6 commentaires

max-largeur au lieu de min-largeur ?


                                        
                                                                            @Stijntjhe max-largeur ne fonctionnerait pas dans mon cas, je pense. Je veux qu'ils alignent donc j'ai besoin d'une sorte de largeur. Si je spécifie seulement max-largeur pour mes étiquettes, ils seront tous sur la place non?
                                        
                                                                            Si j'ajoute une marge-bas: 0.6em à l'étiquette au moins, il n'a pas l'air horrible quand il enveloppe (il se rapproche de près de l'autre contrôle puisqu'il est flottant à gauche)
                                        
                                                                            Je pensais que vous avez utilisé  min-largeur  mais vous devez utiliser  max-largeur . La question est un peu déroutante.

                                        
                                                                            Vous ne devriez vraiment pas être préoccupé par IE6.
                                        
                                                                            Je pense que vous feriez mieux de définir une largeur fixe que d'utiliser une table pour des informations non tabulaires.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    8
 votes
                                
                            
                            
                                
                                     Vous pouvez définir le    code> CSS sur  Affichage: Cellule de table  CODE> ET LE CONTENANT  
  CODE> TO  Affichage: rangée de table  code>. Cela imitera le comportement de l'utilisation d'une table sans utiliser un    code>. <div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-firstname">First Name:</label>
    <input type="text" name="fm-firstname" id="fm-firstname" />
</div>
<div style="display: table-row">
    <label style="display: table-cell; padding: 0 1em; text-align: right;" for="fm-lastname">Last:</label>
    <input type="text" name="fm-lastname" id="fm-lastname" />
</div>

                                

                                                                    
                                    
                                    
                                        3 commentaires
                                        
                                                                                            
                                                    Solution soignée, mais ne fonctionne pas dans IE 6 pourrait passer, mais ne pas supporter IE 7 Je ne pense pas que cela volera avec la haute direction;)                                                
                                                
                                                                                            
                                                    J'ai vérifié Analytics, malheureusement, c'est-à-dire que 7 représente encore 20% de nos visiteurs ... Pourquoi les gens ne veulent-ils que mettre à niveau!                                                
                                                
                                                                                            
                                                    +1 et accepté, c'est la bonne solution, espérons-le, les navigateurs rattraperont bientôt les spécifications CSS. Merci Ngln pour les autres réponses aussi bien +1.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Eh bien, voici une solution un peu non conventionnelle, mais je pense que la simplicité devrait fonctionner pour tous les navigateurs. 

  Le violon de l'échantillon . 

 L'accessibilité ne semble pas être un problème, à la fois pour le clavier et le contrôle de la souris comme hommage. Le principal inconvénient bien sûr est que cette page ne fonctionne pas bien si CSS est désactivé. Y a-t-il des statistiques quelque part à ce sujet? Et aussi, je ne sais pas comment les lecteurs d'écran réagiront à ce libellé.                                 

                                                                    
                                    
                                    
                                        3 commentaires
                                        
                                                                                            
                                                    Fix simple, mais je sens que "un peu non conventionnel" est un euphémisme.                                                
                                                
                                                                                            
                                                    Je ne sais pas comment le violon a rendu correctement mais cela ne fonctionne pas dans Firefox ou Chrome.  Pastebin.com/gjcqwrj                                                 
                                                
                                                                                            
                                                    @JFrobishow: Vous devez ajouter une déclaration de DOCTYPE valide. En mode bizarre, il devient laid. C'est comme ça que les bizarreries sont censées être.                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     sur mon formulaire   s toujours occuper 100% de la largeur disponible. Vous pouvez utiliser cela. 

 S'il est autorisé à remplir toute la largeur du conteneur fourni pour ce formulaire, cela semble une réponse valide: 

  Le violon de l'échantillon.  

 L'inconvénient mineur dans ce cas est de choisir le rapport entre la largeur des étiquettes et les entrées.                                 

                                                                    
                                    
                                    
                                        0 commentaires