Partage
  • Partager sur Facebook
  • Partager sur Twitter

CSS : Largeur = largeur du plus grand

Sujet résolu
    1 août 2020 à 20:12:19

    Bonjour.

    Pas de javascript !

    J'ai 3 labels avec la propriétée :

    whitespace:nowrap;

    j'aimerai definir leur largeur en fonction du label le plus large.

    est-ce possible en css ?

    • Partager sur Facebook
    • Partager sur Twitter
      2 août 2020 à 9:08:50

      Bonjour,

      en rusant on peut y arriver, mais tout dépend de la structure du formulaire et du design désiré, la solution une colonne pour les labels, une colonne pour les inputs fonctionne bien, les labels prennent la largeur du plus large d'entre eux

      1 colonne pour les labels (div "colonne-labels"), 1 colonne pour les input (div "colonne-inputs"), les deux en flex + flex-direction:column, et le tout dans une div en flex +  flex-direction:column

      régler les line-height, attention à la border des input qui augmente leur hauteur, si il y a un text-area tout fonctionne bien aussi

      • Partager sur Facebook
      • Partager sur Twitter
        2 août 2020 à 13:45:49

        Bonjour,

        Oui, cela est possible en CSS.

        quels sont tes code HTML et CSS associé que tu as déjà ?

        Display offre plusieurs option possibles, column CSS aussi, mais un minimum d'infos sont nécessaires pour te proposer  ce qui cadre avec ce que tu as déjà et le visuel que tu souhaites.

        Cdt

        -
        Edité par gcyrillus 2 août 2020 à 13:47:13

        • Partager sur Facebook
        • Partager sur Twitter
          2 août 2020 à 19:08:26

          Le but c'est de mettre les label a gauche justifier a droite et les input a droite justifier a gauche biensur.

          j'avais ca :

              <form (ngSubmit)="onSubmit(f)"  #f="ngForm">
                <fieldset>
                  <legend>Inscription</legend>
            	      <div><label>Username :</label><input type="text" name="username" placeholder="Username" ngModel/></div>
          	      <div><label>Identifier :</label><input type="text" name="identifier" placeholder="Identifier" ngModel/></div>
          	      <div><label>Password :</label><input type="password" name="password" placeholder="Password" ngModel/></div>
          	      <div><label></label><input type="submit" value="Submit" ></div>
                </fieldset>
              </form>

          avec

          fieldset{
              display:flex;
              flex-direction:column;
              background-color:#474749;
          }
          fieldset div{
              display:flex;
              flex-direction:row;
          }

           finalement le plus simple est peut être un tableau table tr td ?

          -
          Edité par Adrien Supra 2 août 2020 à 19:18:56

          • Partager sur Facebook
          • Partager sur Twitter
            2 août 2020 à 19:34:26

            une solution simple, sans les grids, juste des flex-box

            <form>
            	<div class="labels-et-inputs">
            		<div class="colonne-labels">
            			<label for="nom">nom :</label>
            			<label for="email">email :</label>
            			<label for="pays">pays de résidence habituel :</label>
            		</div>
            		<div class="colonne_inputs">
            			<input type="text" name="nom" id="nom">
            			<input type="email" name="email" id="email">
            			<input type="text" name="pays" id="pays">
            		</div>
            	</div>	
            </form>
            
            label {
            	cursor:pointer;
            	text-align:right;
            }
            label,input  {
            	height:30px;
            	line-height:30px;
            	padding:0px;
            	border:0px;
            }
            .labels-et-inputs {
            	display:flex;
            }
            .colonne-labels,.colonne_inputs {
            	display:flex;
            	flex-direction:column;	
            }

            qu'en penses-tu?


            • Partager sur Facebook
            • Partager sur Twitter
              2 août 2020 à 19:51:35

              ChrisLebure a écrit:

              qu'en penses-tu?

              Franchement c'est pas mal. Le petit moins par rapport aux table c'est que ca force a définir une hauteur.

              -
              Edité par Adrien Supra 2 août 2020 à 19:52:29

              • Partager sur Facebook
              • Partager sur Twitter
                2 août 2020 à 21:10:14

                Bonsoir,

                On peut aussi réduire le fieldset au minimum de son contenu le plus large et appliquer la même idée en grid aux divs:

                css de démo possible  pour ton HTML.

                fieldset {
                  background-color: #474749;
                  width: max-content;/* largeur reduit aux contenus les plus large*/
                  margin:auto;
                }
                fieldset div {
                  display: grid;
                  grid-template-columns: auto max-content;
                }
                label {
                  text-align: right;
                }

                démo en ligne modifiable pour le fun : https://codepen.io/gc-nomade/pen/abNozZW

                -
                Edité par gcyrillus 2 août 2020 à 22:11:43

                • Partager sur Facebook
                • Partager sur Twitter

                CSS : Largeur = largeur du plus grand

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown