[Résolu] Taille des boutons radio

Bonjour à tous

J'ai du code (généré par JS) de la forme

<span class="radio">
    <label><input type="radio" name="type" value="programme"><span>Programme></label>
     <label><input type="radio" value= "concerts"><span>Concert</span></label>
    .....
    .....
</span>

et

span.radio {
  display: flex;
  flex-direction: column;
}

J'obtiens ceci

Pourquoi le bouton radio de "Autres" est-il plus grand que les autres ?
Modifié par PapyJP (30 Jul 2025 - 18:12)

Salut,

Tout simplement que ton code n'est pas valide !

1. l'élément <span> est de type inline. Ce qui veut dire que span > label > input (type inline block) n'est pas très cohérent. Si tu veux être plus pertinent, <fieldset> + <legend> sont plus appropriés
2. cette ligne n'est pas du tout valide :

<label><input type="radio" name="type" value="programme"><span>Programme></label>

___
w3c validator est un ami
Modifié par Niuxe (30 Jul 2025 - 18:43)

Bonjour PapyJP,

Comme le souligne @Niuxe, l'extrait de code présenté n'est pas valide.
Tu as probablement un cafouillage dans la structure HTML et l'application des styles. Ton gros bouton radio, se retrouve probablement en enfant direct d'une grille (flex ou grid), du coup il se trouve étiré sur toute la hauteur disponible de la cellule de grille qu'il occupe.

Par ailleurs,
je vois que tu utilise flex en colonne , autant se servir de grid qui se déroule en colonne par défaut et sera bien plus efficace.
Le résultat visuel attendu, ne nécessite pas l'usage de span si tu utilise un système de grille. Le code peut-être réduit aux éléments de formulaire distribués dans une grille.

Je te propose de nettoyer ton code de ces span et de distribuer en 2 colonnes les label et input via display:grid plutôt que flex.

coté HTML
1er option : label et input liés mais séparés :

  <fieldset>
    <legend> Affectez une catégorie à cette idée</legend>
    <input type="radio" id="idea1" name="idea1"> 
    <label for="idea1"> idée 1 </label>
    
    <!-- etc. -->
    
    <input type="submit" value="ok" >
  </fieldset>

2eme option reprenant ta structure avec les input dans les labels:

<fieldset>
    <legend> Affectez une catégorie à cette idée</legend>
     
    <label for="idea7"><input type="radio" id="idea7" name="idea7"> idée 7 </label>
    
    <!-- (liaison via for peut-être redondante) etc. -->
    
    <input type="submit" value="ok" >
  </fieldset>

Coté CSS
Pour la première et base de la seconde option:

fieldset {
  display:grid;/* au lieu flex column */
  grid-template-columns: 2em auto; /* 2 colonne pour label + input */
  align-items:center;/* alignement vertical, pas d'etirement */
  gap:.6em .2em; /* espacement entre les cellules */
}
legend {
  padding-inline:1em;
  font-weight:bolder;
}
[type="submit"] {
  grid-column:1/-1;
  margin-inline-end:auto;
}

Surcharge pour la seconde option: Les label reprennent la grille principale

#option2 label {
  display:grid;
  grid-column:1/-1;
  grid-template-columns:subgrid;
  align-items:center;
}

Tu peut voir et jouer avec ces codes ici https://codepen.io/gc-nomade/pen/VYvPMQp

Cdt

Merci pour cette réponse
Comme je l'ai dit plus haut, le code HTML est généré par JavaScript en modifiant le DOM.
Cela garantit normalement que le code est (à peu près) correct mais en contrepartie le code généré est parfois étrange.
Pour en avoir le cœur net j'ai remplacé le <span class="radio"> par <div class"radio"> et modifié le CSS en conséquence.
Le résultat est encore pire que le précédent

Comme l'indique @gcyrillus la raison de cet aspect bizarre est l'utilisation de flex.
Jusqu'à présent je n'ai jamais utilisé grid, j'ai déjà du mal à m'y retrouver dans l'utilisation de flex, mais ça peut être une bonne occasion de m'y mettre.

La raison pour laquelle je n'ai pas utilisé <fieldset> au lieu de <span> ou <div> c'est que cet élément se trouve lui-même dans un <fieldset> qui inclut le bouton OK en bas et qu'on ne peut pas mettre un <fieldset> dans un <fielset> me semble-t-il.
Modifié par PapyJP (31 Jul 2025 - 10:47)

Hello,

Au-delà de toutes les remarques (pertinentes) déjà reçues, je me permets une petite suggestion car ce cas de figure nous est déjà arrivé plusieurs fois.

Je suppute que la raison serait due au `flex-shrink` des items valant `1` par défaut et qui s'applique sur certains de tes labels / radios lorsqu'ils n'ont pas de place.

Pourrais-tu tester les styles suivants pour voir ?

span.radio {
  display: flex;
  flex-direction: column;

  & > * {
    flex-shrink: 0;
  }
}

EDIT : si tel est le cas, tu n'aurais effectivement pas eu ce genre de problèmes avec Grid Layout.
Modifié par Raphael (31 Jul 2025 - 15:23)

Pour l’instant je suis revenu aux bons vieux display:table, table-row et table-cell
Je ferai d’autres tests plus tard quand j’aurai progressé dans d’autres points de cette page.
Modifié par PapyJP (31 Jul 2025 - 19:25)

Raphael a écrit :

...
car ce cas de figure nous est déjà arrivé plusieurs fois.
...

Ah oui exact. De mon côté, je gère avec une icon les radio et checkbox. Avec ce code, le label se prend une fessée... (span, span, span)

<label class="cell medium-3 flex-container align-middle">
    <input type="checkbox" name="appointement">
    <span class="icon" aria-hidden="true">
        <span class="fa-regular fa-square"></span>
        <span class="fa-solid fa-square-check"></span>
    </span>
    <span class="margin-left-1">text du label</span>
</label>

*le input:checkbox est en position fixed, left -5000px. Pour gérer l'affichage des icons, je montre l'icon coché, je cache l'autre et inversement.

Je pense que le mieux étant d'indiquer un svg dans le dom avec des <symbol> et utiliser <use>. Ça permet d'éviter un chargement foireux de la typo .
Modifié par Niuxe (31 Jul 2025 - 19:01)

Hmm!
Il faut bien comprendre que mon activité actuelle est de participer au fonctionnement d'une association musicale, ce qui inclut la gestion du site, mais également beaucoup d'autres choses telles que la fabrication de partitions et de fichiers d'apprentissage.
J'ai essayé de me plonger dans le livre de Raphael sur Grid Layout et j'estime que te temps nécessaire à assimiler la syntaxe est plus important que le temps que je peux consacrer à la fabrication de cette page.
Je pourrais bien entendu faire un copier/coller du code CSS de @gcyrillus, mais je n'aime pas trop faire ce genre de choses sans les comprendre.

Je vais donc en rester à la solution basique qui me donne un résultat acceptable:

span.radio {
  display: table;
  text-align:left;
}
.radio label {
  display: table-row;
}
.radio label > * {
  display:table-cell;
  vertical-align: middle;
}

Indépendamment de ce problème de CSS, je ne vois pas en quoi

<span>
    <label><input><span></span></label>
</span>

est incorrect.
À ma connaissance <span> est un "inline container", <label> est également un "inline container", <input> est un élément inline. C'est donc conforme à la syntaxe HTML me semeble-t-il.
La syntaxe

<label><input><span>text</span></label>

ou

<label><span>text</span><input></label>

est tout à fait légitime. Elle a l'avantage de ne pas nécessiter la gestion d'un id par <input> ce qui est assez complexe quand on fabrique un script JS pour générer le HTML.

PapyJP a écrit :
Indépendamment de ce problème de CSS, je ne vois pas en quoi

<span>
    <label><input><span></span></label>
</span>

est incorrect.

Ce code est correct : il est effectivement autorisé d'imbriquer l'input (et le span) à l'intérieur du label.

Par contre, la ligne de code incrimisée par Niuxe est celle-ci :

<label><input type="radio" name="type" value="programme"><span>Programme></label>

Cette ligne n'est pas valide car le span fermant n'existe pas (ou est en dehors du label).

@Raphael : +1
J'avais relevé : span > label > input + span. À la place, j'écrirai quelque chose comme :
div > label > input + span. Mais j'avoue que c'est finalement juste. C'est juste un style d'écriture. En effet, j'avais remarqué la non fermeture du <span> à l'intéreur du label.

C'est la raison pour laquelle, j'ai indiqué le lien du validator html. Au moindre bug graphique, toujours vérifier la syntaxe de son HTML. Ça m'arrive de le consulter et pourtant, ça fait des années que j'écris du HTML. L'erreur qui m'arrive de faire, c'est dupliquer le même attribut au sein d'un même élément. (oups....)

<div class="une-class" data-quelque-chose="une valeur" id="un-id" class="une-autre-class">
...
</div>

@papyjp :
- grid garden
- emmet (anciennement zen coding)
- Moteur de template léger (fichier minifié : 920 octets) (attention, la syntaxe a changé. Ce ne sont plsu des accolades, mais des crochets. Lire le README).
Modifié par Niuxe (01 Aug 2025 - 18:09)

Merci de vos explications.
Effectivement j’avais fait une erreur de recopie.
L’intérêt d’une génération par JS/DOM c’est qu’on est sûr que les balises sont fermées, les attributs uniques etc.
Modifié par PapyJP (01 Aug 2025 - 18:00)

Je viens de lire dans une discussion obscure sur un autre forum que l'on pouvait avoir un <fieldset> dans un <fieldset>.
Cela me parait assez logique puisque cela signifierait un élément flow-content dans un autre élément flow-content.
Cela me permettrait de ne pas mettre les boutons radio dans un <span> ce qui est sémantiquement perturbant.
Pouvez vous confirmer ?

Edit : https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element
indique explicitement

a écrit :
You can also nest fieldset elements.

Modifié par PapyJP (07 Aug 2025 - 15:05)

PapyJP a écrit :
Je viens de lire dans une discussion obscure sur un autre forum que l'on pouvait avoir un &lt;fieldset&gt; dans un &lt;fieldset&gt;.
Cela me parait assez logique puisque cela signifierait un élément flow-content dans un autre élément flow-content.
Cela me permettrait de ne pas mettre les boutons radio dans un &lt;span&gt; ce qui est sémantiquement perturbant.
Pouvez vous confirmer ?

Edit : https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element
indique explicitement
You can also nest fieldset elements.

Bonjour,

Oui, c'est valide. Mais Sans vouloir te froisser, cela n'a pas vraiment de sens ici vu qu'il ne s'agit pas d'un formulaire long et complexe.

Tu peut simplement englober tes labels/radios dans un paragraphe si tu as vraiment besoin de créer un conteneur pour chacun. (note qu'une série de radio peut-être très similaire à un select ...). Autre point de vue, tu englobes tes input dans un label, tu as déjà un élément pour chaque duo qui te sert de conteneur.

Cordialement.

P.S. grid et grid-template-columns sont basiquement simple à utiliser: grid-template-columns te permet de construire un nombre X de colonnes dans lesquelles les enfants iront se positionner et créer de nouvelles lignes aux besoins. C'est plus solide et moins verbeux que display:table et Cie .

Cordialement.


edit : voici un autre exemple plus proche de ta base initiale : https://codepen.io/gc-nomade/pen/NPGvPaZ
Modifié par gcyrillus (08 Aug 2025 - 08:57)

Merci de ces remarques, je vais regarder ça de plus près.