Mettre sur une ligne label et champ de saisie de manière propre

Bonjour
Je cherche à un peu normalisée l'affichage (cf image et code)
Ordre d'importance décroissante
a) remonter le champ après le libellé
b) mettre le libellé sur 1 ligne
c) réduire la taille du champ à 4 digit ?
Merci pour votre aide
@+

<input type="text" name="jform[capacity]" id="jform_capacity" value="10" class="form-control" title="Définit le nombre de participants acceptés sur cet événement. Zéro signifie que la fonctionnalité de réservation est bloquée. Si la valeur est vide, un nombre indéfini de tickets est disponible.">

	

</div>
					<div class="control-group dp-field-capacity-used">
			<label id="jform_capacity_used-lbl" for="jform_capacity_used" class="hasPopover" title="" data-content="Définit le nombre de tickets qui ont déjà été réservés pour cet événement. Le comptage est automatique lorsqu'un ticket est réservé. L'administrateur peut ajuster manuellement lorsque des réservations sont faîtes hors-ligne." data-original-title="Tickets réservés">
	Tickets réservés</label>		

	
	<input type="text" name="jform[capacity_used]" id="jform_capacity_used" value="" class="form-control" title="Définit le nombre de tickets qui ont déjà été réservés pour cet événement. Le comptage est automatique lorsqu'un ticket est réservé. L'administrateur peut ajuster manuellement lorsque des réservations sont faîtes hors-ligne.">

	

</div>
					<div class="control-group dp-field-max-tickets">
			<label id="jform_max_tickets-lbl" for="jform_max_tickets" class="hasPopover" title="" data-content="Définit le nombre de réservations qu'un utilisateur peut faire. Ce paramètre agit sur différentes réservation. Par exemple, si le paramètre est fixé à 4 et qu'un utilisateur a déjà réservé 2 tickets, à la prochaine réservation, il ne pourra réserver que deux tickets." data-original-title="Max. Tickets">
	Max. Tickets</label>		

	
	<input type="text" name="jform[max_tickets]" id="jform_max_tickets" value="1" class="form-control" title="Définit le nombre de réservations qu'un utilisateur peut faire. Ce paramètre agit sur différentes réservation. Par exemple, si le paramètre est fixé à 4 et qu'un utilisateur a déjà réservé 2 tickets, à la prochaine réservation, il ne pourra réserver que deux tickets.">

</div>

Modifié par HDcms (09 Mar 2020 - 15:21)

Salut,

Il manque une partie du code et surtout le CSS (par défaut un input ne prend pas 100% de la largeur comme sur ton screenshot donc si tu as ce comportement c'est a cause de ton CSS).

Sinon, a la louche :

a écrit :
a) remonter le champ après le libellé

Normalement c'est le comportement par défaut. Pour forcer la taille :

input {
   width: 50px;
}

a écrit :
b) mettre le libellé sur 1 ligne

Normalement par défaut aussi. Pour forcer ca :

label {
   white-space: nowrap;
}

a écrit :
c) réduire la taille du champ à 4 digit ?

voir a)


Le comportement par défaut sans CSS :


https://jsfiddle.net/undless/yn9j0k6r/3/

Bonsoir,
Effectivement troublant que cela fonctionne pas défaut mais logique, les cms utilise un empilement de couches.
Malheureusement je n'ai pas pu installé le code car cela à des effets de bords déplaisant sur d'autres champs
J'essaie de régler champ par champ mais j'ia un peu de mal car je n'ai pas envie d'utiliser nchild car le nombre d'éléments du formulaire et l'ordre peut varier. Pénible !!
@+

HDcms a écrit :
J'essaie de régler champ par champ mais j'ia un peu de mal car je n'ai pas envie d'utiliser nchild car le nombre d'éléments du formulaire et l'ordre peut varier.

tu peux rajouter des classes spécifiques seulement sur les champs que tu veux toucher

Bonjour,
Bon j'y suis arrivé sur la plupart mais je ne sais pas pourquoi, il en reste quelques uns d'irréductible!
Pourtant j'essaie de les atteindre de la même façon que les autres avec les outils firefox ou chrome.
Est-ce du fait que c'est un textarea ?
Voici le code HTML. Si dès fois vous aviez la solution?
Merci
@+

<div class="control-group dp-field-rendez-vous">
			<label id="jform_com_fields_rendez_vous-lbl" for="jform_com_fields_rendez_vous">
	Rendez-vous: horaire et lieu </label>		<textarea name="jform[com_fields][rendez-vous]" id="jform_com_fields_rendez_vous" rows="3" class="form-control" maxlength="500"></textarea></div>
					

Bonjour,
Petite relance dès fois que !
Merci
@+