Produits Entr'ouvert » Gadjo

Je ne comprends pas l'intérêt de lancer un trigger change au chargement de la page.
Nul besoin de sauvegarder l'état du checkbox de visibilité. Il devrait toujours être décoché au chargement d'une page (le choix d'afficher le pass en clair devrait toujours provenir d'une action humaine).

Sur un rafraichissement de page type F5, le navigateur peut conserver la case cochée, sans en lancer l'événement.

Ok, j'ai alors une préférence pour décocher la checkbox si cochée au chargement d'une page, que d'afficher le pass en clair.

En conflit ?

Se superpose.

Ok pour moi ça n'arrive pas. Soit page de connexion l'intitulé est "Mot de passe" et ça laisse de la place, même avec deux blocs côte à côte, soit le libellé est plus long, "Confirmation du nouveau mot de passe" mais là on a toute la largeur.

Techniquement les 2 peuvent se superposer. Et des cas où ça peut arriver existent, comme créer un thème avec un font-size de base de 18 (ex Saumur, MNHN), choisir une font qui chasse un peu plus. L'idéal serait qu'à la création d'un thème on ait pas à se soucier de devoir corriger le layout d'un widget en fonction des choix typos du thème.
(Je pose une capture du formulaire de création de compte à 360px et font-size 18px)

Ok et donc l'idée serait de poser un padding-right sur le label, pour forcer un retour à la ligne plus tôt ?

Appliquer un padding au label.
Par exemple un padding de 6em.
Mais ce padding ne s'adaptera pas à toutes les caracs d'une font. Dans certains cas le padding pourra être trop grand (utilisation d'une font condensed par ex.) ou trop petit.

J'ai alors tenté une solution 2, radicalement différente, à base de grid.
Mais le préalable est de décaler le {% block widget-bottom } après le bloc { widget-content %} (Si excluant, back solution padding)

.gadjo-password-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: .7em;

  .content {
    grid-column-end: span 2;
  }
}

.password-visibility-checkbox {
  display: flex;
  grid-row: 1 / 2;
  grid-column: 2 / 3;

  input {
    margin-bottom: 0;
  } 
  input + label {
    margin: 0;
  }
}

Mais ce padding ne s'adaptera pas à toutes les caracs d'une font. Dans certains cas le padding pourra être trop grand (utilisation d'une font condensed par ex.) ou trop petit.

Je préférerais quand même cette petite solution simple; avec un peu de marge au pire ça passe à la ligne un peu trop tôt.