Par exemple: Dans / user / login, les champs de saisie du nom dutilisateur et du mot de passe incluent un attribut HTML size = « 60 ».
Dans Bartik, les champs ont une largeur fixe.
Dans Bootstrap , les champs sont étirés pour remplir toute la largeur de lécran.
Comportement demandé: Je voudrais faire en sorte que Bootstrap obéisse à lattribut size – sur / user / login, et sur toutes les autres pages du site Web. Je ne suis pas en mesure de générer une liste de toutes les pages affectées car il y en a beaucoup et cela changera avec le temps.
Il semble que quelque chose dans Bootstrap SCSS gâche les largeurs des champs de saisie. Je voudrais supprimer ce quelque chose ou le remplacer. Cependant, je nai pas encore réussi à trouver comment faire cela.
Ce que « jai trouvé jusquà présent: Il y a déjà un problème sur Drupal.org , où le responsable du module markcarver dit
La raison pour laquelle ils « sont » étirés « sur toute leur largeur est quils ont tous les deux une classe de contrôle de formulaire. Cela fait partie de la conception de Bootstrap et je ne vais pas lutter contre cela dès le départ. Il existe plusieurs façons de modifier ce formulaire comme bon vous semble, dans un sous-thème.
Ce qui fonctionne en partie mais pas à 100%: Il serait possible décrire du CSS pour définir une nouvelle largeur sur toutes les entrées avec une classe de contrôle de formulaire de type texte. Cest bien, mais il définit la largeur sur une valeur fixe telle que 15em. Je voudrais récupérer la largeur dorigine, qui sera différente sur chaque entrée.
Commentaires
- Je me demande pourquoi don ' t vous corrigez simplement cela avec CSS ???
- @leymannx Jai clarifié, voir " EDIT 2 ". Oui, je mattends à le corriger avec CSS, mais je recherche un seul changement qui couvre tous les domaines. Si vous savez comment faire cela, veuillez poster / commenter.
- Si la personne qui a voté à la baisse pouvait expliquer pourquoi alors je pourrais peut-être apprendre quelque chose et poser de meilleures questions à lavenir
- Didn ' t downvote, mais je suppose que cela sest produit parce que vous posez en fait une question trop large et que ' ne mettez pas en évidence tout ce que vous avez fait vous-même jusquà présent pour résoudre ce problème vous-même. En dehors de cela, lorsque vous pouvez le résoudre avec CSS et nous demander comment le faire, cette question est également hors sujet. Nous navons ' t vous apprendre à créer un sous-thème et nous navons pas ' vous apprendre à écrire du CSS robuste. Il existe déjà des centaines de tutoriels traitant de cela. Bonne chance! 🙂
- @leymannx Merci. En fait, je pose une question très précise, mais je suppose que je lai mal expliquée. Je ' vais essayer une autre modification. Mais peut-être que je devrais simplement supprimer la question car elle sème la confusion.
Réponse
La manière standard de corriger il sagit dutiliser css dans votre sous-thème basé sur Bootstrap. Pour les champs de connexion nom dutilisateur et mot de passe:
#edit-name, #edit-pass { width: 15em; } NB Je « cherche une solution qui couvre tous forme de saisie, pas seulement la connexion de lutilisateur en tant que cas particulier.
Vous pouvez utiliser cette méthode (css) pour chaque champ de saisie de texte où vous souhaitez remplacer Comportement par défaut de Bootstrap. De toute évidence, vous devez utiliser le bon sélecteur css pour le champ que vous voulez remplacer.
Commentaires
- Merci davoir pris le temps de répondre. Veuillez consulter mon " EDIT 2 " – Jespère éviter davoir à identifier chaque champ qui pourrait être affecté au cas par cas car ce nest pas pratique ou maintenable
- entrée et cible par classe de contrôle de formulaire de type texte?
- @kevin, désolé, mais je ne comprends pas la question.
- au lieu dutiliser des ID, vous pouvez simplement cibler les entrées avec cette classe, qui sont de type ' text '.
- @Kevin merci, oui cest plus ce que jespérais. Cependant, il semble que je serais toujours coincé avec une largeur fixe comme 15em. Je préférerais conserver la largeur réelle spécifiée dans #size. Je voudrais " annuler " tout ce que Bootstrap a fait pour remplacer les largeurs et prendre exactement la même largeur que celle qui se produit dans Bartik.
Réponse
Javais espéré une réponse de la part dun expert et jen serais toujours heureux – je serais heureux de set accepte une autre réponse au lieu de la mienne.
Voici ma meilleure tentative à ce jour. Cela semble fonctionner pour la page de connexion et le bloc de recherche. Cependant, jai toujours limpression que je « combat un système que je nai pas » Je comprends parfaitement.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }