Input type=text pour remplir le conteneur parent

Question

J'essaie de laisser un <input type="text"> (désormais appelée "zone de texte") remplissent un conteneur parent en paramétrant leur width à 100% . Cela fonctionne jusqu'à ce que je donne un padding à la zone de texte. Celui-ci est alors ajouté à la largeur du contenu et le champ de saisie déborde. Notez que dans Firefox, ce phénomène ne se produit que lorsque le contenu est rendu conforme aux normes. En mode Quirks, un autre modèle de boîte semble s'appliquer.

Voici un code minimal pour reproduire le comportement dans tous les navigateurs modernes.

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

Ma question : Comment faire pour que la zone de texte s'adapte au conteneur ?

Avis pour le <div id="y"> c'est très simple : il suffit de définir width: auto . Toutefois, si j'essaie de faire de même pour la zone de texte, l'effet est différent et la zone de texte prend son nombre de lignes par défaut comme largeur (même si j'ai défini l'option display: block pour la zone de texte).

EDIT : La solution de David fonctionnerait bien sûr. Cependant, je ne veux pas modifier le HTML - je ne veux surtout pas ajouter des éléments factices sans fonctionnalité sémantique. C'est un cas typique de divitis que je veux éviter à tout prix. Cela ne peut être qu'un hack de dernier recours.

Answer 1

Avec CSS3, vous pouvez utiliser la propriété box-sizing sur vos entrées pour standardiser leurs modèles de boîte. Quelque chose comme cela vous permettrait d'ajouter du rembourrage et d'avoir une largeur de 100 % :

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

Malheureusement, cela ne fonctionnera pas pour IE6/7 mais les autres fonctionnent bien ( Liste des compatibilités ), donc si vous avez besoin de prendre en charge ces navigateurs, votre meilleure option est la solution de David.

Si vous souhaitez en savoir plus, consultez le site suivant cet article brillant de Chris Coyier .

J'espère que cela vous aidera !

Answer 2

Vous pouvez entourer la zone de texte d'un <div> et donner que <div> padding: 0 20px . Votre problème est que la largeur de 100 % n'inclut pas les valeurs de remplissage ou de marge ; ces valeurs sont ajoutées à la largeur de 100 %, d'où le débordement.

Answer 3

En raison de la façon dont le Box-Modell est défini et mis en œuvre, je ne pense pas qu'il existe une solution uniquement css à ce problème. (En dehors de ce que Matthew décrit : utiliser le pourcentage pour le rembourrage également, par exemple : width : 94% ; padding : 0 3% ;)

Vous pourriez cependant créer un code Javascript pour calculer la largeur de manière dynamique au chargement de la page... hm, et cette valeur devrait bien sûr être mise à jour à chaque fois que la fenêtre du navigateur est redimensionnée.

Un sous-produit intéressant de certains tests que j'ai effectués : Firefox fait fixer la largeur d'un champ de saisie à 100 % si en plus à width: 100%; vous définissez également la largeur maximale à 100 %. Cela ne fonctionne pas dans Opera 9.5 ou IE 7 (je n'ai pas testé les versions plus anciennes).

Answer 4

Cela n'est malheureusement pas possible avec du CSS pur ; des modifications HTML ou Javascript sont nécessaires pour tout comportement non trivial de l'interface utilisateur flexible mais avec des contraintes. Les colonnes CSS3 seront utiles à cet égard, mais pas dans des scénarios comme le vôtre.

La solution de David est la plus propre. Ce n'est pas vraiment un cas de divitis - vous n'ajoutez pas un tas de divs inutilement, ni ne leur donnez des noms de classe comme "p" et "h1". Cette solution répond à un besoin spécifique, et ce qui est bien dans ce cas, c'est qu'elle est également extensible. Par exemple, vous pouvez ajouter des coins arrondis à tout moment sans ajouter quoi que ce soit d'autre. L'accessibilité n'est pas non plus affectée, puisqu'il s'agit de divs vides.

Pour info, voici comment j'implémente toutes mes zones de texte :

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

Vous êtes alors libre d'utiliser les CSS pour ajouter des coins arrondis, un rembourrage comme dans votre cas, etc., mais vous n'êtes pas non plus obligé de le faire : vous pouvez masquer complètement ces divs latéraux et n'avoir qu'une simple zone de saisie.

D'autres solutions consistent à utiliser des tableaux (Amazon, par exemple, utilise des tableaux pour obtenir une mise en page souple mais limitée) ou à utiliser Javascript pour modifier les tailles et les mettre à jour en fonction de la taille de la fenêtre (Google Docs, Maps, etc.).

Quoi qu'il en soit, mon avis est le suivant : ne laissez pas l'idéalisme prendre le pas sur l'aspect pratique dans des cas comme celui-ci :) La solution de David fonctionne et n'encombre pas du tout le HTML (et en fait, l'utilisation de noms de classe sémantiques comme "before" et "after" reste très propre).

Answer 5

Ce comportement est dû aux différentes interprétations du modèle de boîte. Le modèle de boîte correct stipule que la largeur s'applique uniquement au contenu et que le remplissage et la marge s'y ajoutent. Par conséquent, vous obtenez 100 % plus 20 px de rembourrage à droite et à gauche, soit 100 % + 40 px de largeur totale. Le modèle de boîte original d'IE, également connu sous le nom de mode quirks, inclut le remplissage et la marge dans la largeur. La largeur de votre contenu serait donc de 100 % - 40px dans ce cas. C'est pourquoi vous voyez deux comportements différents. Pour autant que je sache, il n'existe pas de solution à ce problème, mais il est possible de contourner le problème en fixant la largeur à 98 % et le remplissage à 1 % de chaque côté.