width: auto pour les champs <input>

122

Question CSS pour débutant. J'ai pensé width:autoqu'un display:blockélément signifiait «remplir l'espace disponible». Cependant, pour un <input>élément, cela ne semble pas être le cas. Par exemple:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Deux questions alors:

Existe-t-il une définition de ce que signifie exactement la largeur: auto? La spécification CSS me semble vague, mais j'ai peut-être manqué la section correspondante.
Existe-t-il un moyen d'atteindre mon comportement attendu pour un champ d'entrée - ie. remplir l'espace disponible comme le font les autres éléments de niveau bloc?

Merci!

css

— richb
source

duplication possible de l' entrée avec affichage: le bloc n'est pas un bloc, pourquoi pas?

— Phrogz

@Phrogz Oui, c'est un doublon. J'ai cherché mais je ne l'ai pas trouvé. THX.

— richb

88

Une <input>largeur de » est généré à partir de son sizeattribut. La valeur par défaut sizeest ce qui motive la largeur automatique.

Vous pouvez essayer width:100%comme illustré dans mon exemple ci-dessous.

Ne remplit pas la largeur:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Remplit la largeur:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Plus petite taille, plus petite largeur:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

METTRE À JOUR

Voici le mieux que je puisse faire après quelques minutes. C'est 1px off dans FF, Chrome et Safari, et parfait dans IE. (Le problème est que # ^ & * IE applique les bordures différemment de tout le monde, donc ce n'est pas cohérent.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— Ben
source

24

Merci. largeur: 100%, ce n'est pas la même chose. Il débordera de la boîte parent s'il y a des marges ou une bordure.

— richb

1

Vous pouvez les définir explicitement pour ajuster comme vous le souhaitez, par exemple border:2px inset #eee; margin:-2px. Je ne l'ai pas testé moi-même, mais quelque chose du genre.

— Ben

3

Merci Steve. Vous devriez également consulter stackoverflow.com/questions/1030793/… qui a d'autres idées intéressantes.

— richb

1

Solution épique pour des largeurs cohérentes via css sur les champs de saisie, +1

— Stephen Sprinkle

11

vous pouvez utiliser définir la propriété input box-sizing sur border-box pour empêcher la bordure de chevaucher le conteneur.

— nicholas

26

"Existe-t-il une définition de ce que signifie exactement width: auto? La spécification CSS me semble vague, mais j'ai peut-être manqué la section correspondante."

Personne n'a répondu à la partie ci-dessus de la question de l'affiche originale.

Voici la réponse: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Tant que la valeur de width est auto, l'élément peut avoir une marge horizontale, un remplissage et une bordure sans devenir plus large que son conteneur ...

D'autre part, si vous spécifiez width: 100%, la largeur totale de l'élément sera de 100% de son bloc contenant plus toute marge horizontale, remplissage et bordure ... C'est peut-être ce que vous voulez, mais ce n'est probablement pas le cas .

Pour visualiser la différence, j'ai fait un exemple: http://www.456bereastreet.com/lab/width-auto/

— réponse
source

4

belle réponse / lien, je suggère de mettre un troisième exemple avec "box-sizeing: border-box" ...

— halfbit

ce n'est pas pour une entrée et puisque auto est la valeur par défaut, je ne vois pas en quoi c'est utile

— Barbz_YHOOL

9

Comme indiqué dans l'autre réponse, width: auto ne fonctionne pas car la largeur est générée par l'attribut size de l'entrée, qui ne peut pas être défini sur "auto" ou quelque chose de similaire.

Il existe quelques solutions de contournement que vous pouvez utiliser pour le faire fonctionner correctement avec le modèle de boîte, mais rien de fantastique à ma connaissance.

Tout d'abord, vous pouvez définir le remplissage dans le champ à l'aide de pourcentages, en vous assurant que la largeur s'élève à 100%, par exemple:

input {
  width: 98%;
  padding: 1%;
}

Une autre chose que vous pourriez essayer est d'utiliser le positionnement absolu, avec la gauche et la droite définies sur 0. Utilisation de ce balisage:

<fieldset>
    <input type="text" />
</fieldset>

Et ce CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Ce positionnement absolu amènera l'entrée à remplir le jeu de champs parent horizontalement, indépendamment du remplissage ou de la marge de l'entrée. Cependant, un inconvénient majeur est que vous devez maintenant gérer la hauteur du jeu de champs, qui sera 0 à moins que vous ne le définissiez. Si vos entrées sont toutes de la même hauteur, cela fonctionnera pour vous, réglez simplement la hauteur du jeu de champs sur la hauteur de l'entrée.

En dehors de cela, il existe des solutions JS, mais je n'aime pas appliquer un style de base avec JS.

— Jon Raasch
source

8

Comme inputs widthest contrôlé par son sizeattribut, voici comment j'initialise un en input widthfonction de son contenu:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Fabricio
source

1

Bien que cette #angularréponse spécifique ne soit pas une réponse valide à la question du PO (et je ne vote pas pour), je suis venu à ce sujet juste pour trouver cette idée particulière.

— nobug

5

Ce n'est peut-être pas exactement ce que vous voulez, mais ma solution de contournement consiste à appliquer le style autowidth à un div wrapper - puis définissez votre entrée sur 100%.

— mwilcox
source

0

La seule option à laquelle je peux penser est d'utiliser width:100%. Si vous souhaitez également avoir un remplissage sur le champ de saisie, plutôt que de simplement placer un conteneur labelautour de lui, déplacez la mise en forme vers cette étiquette à la place, tout en spécifiant également le remplissage sur l'étiquette. Les champs de saisie sont rigides.

— Lajos Meszaros
source

0

Réponse 1 - "réponse" a donné une bonne réponse / lien pour cela. Pour résumer, "auto" est la valeur par défaut, c'est donc comme supprimer toute modification de la largeur d'un élément

Réponse 2 - utilisez width: 100%plutôt. Il remplira à 100% le conteneur parent, dans ce cas, le «formulaire».

— Akhil Gupta
source

-4

Liens absolument incroyables décrivant une fonctionnalité absolument incroyable:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

L'essentiel:

Mettez les éléments dans un conteneur avec display: flex;.
Défini flex-grow: 1;sur chacun des éléments contenus.
Si vous avez des éléments dans ces éléments contenus qui doivent également s'agrandir, répétez les étapes 1 et 2 pour les éléments contenus et leurs éléments enfants (contenus-contenus).
Adaptez et ajustez en fonction des besoins variés (voir liens)

Modifier - exemple :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Andrew
source

En quoi cela contribue-t-il à une largeur automatique des entrées?

— noyau

@kernel Simple. Voir exemple.

— Andrew

La largeur de l'entrée est toujours de 100% et non le minimum possible.

— noyau du

2

L'entrée n'a toujours pas la même largeur que son contenu, ce qui était la question.

— noyau du

Si vous lisez la réponse acceptée - et aussi celle de tous les autres -, cela fait quelque chose de différent. La question serait alors "que faites-vous bien que tout le monde fait mal?".

— noyau du