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 ?

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

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

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 -Crixus- 2 août 2020 à 19:18:56

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?

ChrisLebure a écrit:

qu'en penses-tu?

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

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