Javascript Girl
  1. Javascript Girl
  3. Formulaire avec étiquette + unités de champ enveloppables, mais ensuite aligner bien lorsque vous l'enveloppez
Intereting Posts
Est-il possible de capturer globalement la clé sur les entrées de texte ajoutées dynamiquement? Gruntfile obtient les codes d'erreur des programmes en série Distinguez entre array et hash en javascript avec typeof () Protéger la logique côté client et les données L'authentification Facebook redirect_uri n'est pas un URI absolu Envoi de courrier électronique à partir de gmail api non reçu mais affiché dans le dossier envoyé Test A / B avec Google Optimiseur Web; Quel cookie me dit que le visiteur a obtenu A ou B Reliure de widgets avec Gridster et Knockout Blocage de l'IE moderne? Comment déplacer div avec la souris en utilisant jquery? Appelants ajax aux fonctions du code-code du contrôleur Regex pour obtenir une chaîne entre les accolades "{Je veux ce qui se passe entre les accolades}" Obtenir la position absolue d'un élément par rapport au navigateur Comment puis-je garder l'onglet actuel actif avec Twitter bootstrap après une recharge de page? Interagir avec les modules require.js de la console Firebug / Chrome?

Formulaire avec étiquette + unités de champ enveloppables, mais ensuite aligner bien lorsque vous l'enveloppez

J'ai une forme dans un design fluide composé d'une série d'étiquettes et de champs, où je veux qu'ils s'écoulent l'un après l'autre et que l'on abaisse si nécessaire pour supporter la largeur de la fenêtre. (L'étiquette et l'entrée doivent circuler en tant qu'unité, pas d'étiquette pendante au bout d'une rangée avec sa saisie sur la rangée suivante). Mais lorsqu'elles s'emballent, je veux que les champs s'alignent d'une manière ordonnée. Existe-t-il un moyen de le faire avec HTML et CSS? (Malheureusement, je dois supporter des navigateurs plus anciens sans colonnes CSS3 [s'ils en ont même aidé].)

J'ai essayé plusieurs choses, par exemple en donnant aux étiquettes une longueur fixe (vous voudrez cliquer sur le bouton 'Plein écran' dans l'extrait afin que la largeur de la fenêtre de l'extrait ne soit pas corrigée) : 

.wrapped-fields label { display: inline-block; } .wrapped-fields label > span { display: inline-block; width: 8em; white-space: nowrap; } 
 <form class="wrapped-fields"> <label> <span>Short:</span> <input type="text" size="5"> </label> <label> <span>Long label for field:</span> <input type="text" size="5"> </label> <label> <span>Medium label:</span> <input type="text" size="5"> </label> <label> <span>Short:</span> <input type="text" size="5"> </label> <label> <span>Long label for field:</span> <input type="text" size="5"> </label> <label> <span>Medium label:</span> <input type="text" size="5"> </label> </form>

… mais cela n'est pas satisfaisant pour plusieurs raisons:

  1. Il faut que je fixe une taille fixe pour les marges, mais les noms de ces étiquettes peuvent provenir de la configuration et je ne veux donc pas les mesurer à l'exécution et ajuster la taille fixe au plus grand.

  2. Il semble correct quand ils sont empilés avec l'étiquette la plus longue dans chaque colonne:

    Entrez la description de l'image ici

    … mais terrible quand ils ne le sont pas, par exemple:

    Entrez la description de l'image ici

    …ou:

    Entrez la description de l'image ici

Idéalement, chaque «colonne» prendrait la taille de l'étiquette ou du champ le plus long (bien que pour l'instant tous les champs soient de la même taille), de manière appropriée, à mesure que l'étiquette + les paires de champs sont enroulées.

À défaut d'une solution HTML / CSS, existe-t-il une solution JavaScript simple? (Sinon, j'écrirai le complexe, ne demandant pas aux gens de faire des quantités importantes de code si c'est ce qu'il faut.)

Le cas échéant:

  • J'utilise Bootstrap, donc si le système de grille aide (je n'ai pas eu de chance), nous pourrions utiliser cela

  • J'utilise jQuery, si nous avons besoin d'une solution JavaScript

Je pense que la meilleure solution serait de mettre toutes les étiquettes dans un div et de mettre toutes les entrées dans un div. Ensuite, je diviserais les groupes d'entrées en colonnes.

Voici un exemple: 

 .column { display: inline-block; margin: 10px 0px 10px 0px; } .labels { display: inline-block; } .inputs { display: inline-block; margin-left: 10px; } 
 <form class="form"> <fieldset class="fieldset"> <legend>Forms</legend> <div class="column"> <div class="labels"> <label>Field Name:</label> <br> <label>Short:</label> </div> <div class="inputs"> <input type="text" size="5"> <br> <input type="text" size="5"> </div> </div> <div class="column"> <div class="labels"> <label>Field Name:</label> <br> <label>A Much Longer Field Name:</label> </div> <div class="inputs"> <input type="text" size="5"> <br> <input type="text" size="5"> </div> </div> <div class="column"> <div class="labels"> <label>Some More Field Names:</label> <br> <label>Not So Long:</label> </div> <div class="inputs"> <input type="text" size="5"> <br> <input type="text" size="5"> </div> </div> </fieldset> </form>