Le remplissage dans les entrées coupe la largeur de 100%

130

Ok, nous savons donc que la définition du remplissage sur un objet entraîne une modification de sa largeur même si elle est définie explicitement. Bien que l'on puisse discuter de la logique derrière cela, cela pose des problèmes avec certains éléments.

Dans la plupart des cas, vous ajoutez simplement un élément enfant et ajoutez un remplissage à celui-ci au lieu de celui défini à 100%, mais pour les entrées de formulaire, ce n'est pas une étape possible.

Jetez un œil à ceci: http://sandman.net/test/formcss.html

La deuxième entrée a son remplissage réglé à 5px, ce que je préfère de beaucoup au paramètre par défaut. Mais malheureusement, cela fait augmenter l'entrée de 10 pixels dans toutes les directions, y compris l'ajout de 10 pixels à la largeur de 100%.

Le problème ici est que je ne peux pas ajouter d'élément enfant à l'intérieur de l'entrée, donc je ne peux pas le réparer. La question est donc:

Existe-t-il un moyen d'ajouter un remplissage à l'intérieur de l'entrée tout en conservant la largeur à 100%? Il doit être à 100% car les formulaires seront rendus dans des parents de largeur différente, donc je ne connais pas à l'avance la largeur du parent.

Marchand de sable
la source
3
Voir stackoverflow.com/questions/628500/… pour savoir comment utiliser l' box-sizingattribut CSS3
Daniel LeCheminant
15
Je dois juste dire, merci d'avoir gardé votre page d'exemple tout ce temps. Cela me rend fou quand quelqu'un publie une URL dans la question et qu'elle est désactivée après la réponse ou qu'ils n'utilisent pas quelque chose comme jsfiddle.
Jonathan Dumaine
Concernant l'utilisation de l'attribut box-sizing; mon problème était le même mais avec la hauteur - régler la hauteur à 100% seul signifie hauteur + bordure + rembourrage = hauteur du conteneur. Pour que l'entrée ait la hauteur réelle du conteneur, j'avais simplement besoin d'utiliser box-sizing: content-box.
Skychan le
Sauf que ce que je viens de dire ne fonctionne pas dans IE. IE11 avec box-sizing: content-box ne règle pas du tout la hauteur avec la hauteur: 100%. Il le respecte avec une hauteur de px spécifique. Donc, la hauteur: 31px sans taille de boîte est 6px inférieure à la hauteur: 31px + taille de boîte: boîte de contenu. Mais l'idée est d'utiliser la hauteur: 100% donc je ne suis pas inquiet de la taille de pixel spécifique!
Skychan le

Réponses:

288

En utilisant CSS3, vous pouvez utiliser la propriété box-sizing pour modifier la façon dont le navigateur calcule la largeur de l' entrée .

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

Vous pouvez en savoir plus ici: http://css-tricks.com/box-sizing/

Víctor Dieppa Garriga
la source
@ Víctor Dieppa Garriga Merci, c'est une excellente solution.
sinanakyazici
1
Le support est le suivant: Chrome (any): box-sizing Opera 8.5+: box-sizing Firefox (any): -moz-box-sizing Safari 3: -webkit-box-sizing (sans préfixe dans les versions 5.1+) IE8 +: box -dimensionnement. Je recommande également ceci pour la réponse acceptée, c'est une solution plus élégante.
Baconbeastnz
1
Pour clarifier la prise en charge du dimensionnement de boîte sur IE, pour la propriété de dimensionnement de boîte IE dépend du mode de document IE, cela fonctionne sur le «mode Normes IE8» et plus. Donc, cela fonctionnera aussi dans la version du navigateur IE8 si le mode document est "IE8 Standards mode". J'espère que cela aide
Sanjeev
Honnêtement, box-sizing: border-box;c'est la première chose à laquelle j'ai pensé, mais cela ne fonctionne absolument pas pour moi. Peut-être que l'arrière-arrière-grand-parent display: flex;joue avec ça?
Cody
On dirait qu'il est pris en charge dans tous les principaux navigateurs sans préfixe, et ce depuis plusieurs versoins: caniuse.com/#feat=css3-boxsizing
Jason
7

Je ne sais pas à quel point il est compatible avec tous les navigateurs (cela fonctionne dans Firefox et Safari), mais vous pouvez essayer cette solution:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Seulement publié les valeurs que j'ai modifiées)

Michaelk
la source
1
Cela pose problème dans IE.
Tarik le
Eh bien, cela ne me surprend pas beaucoup :) Ne pensez pas qu'il existe une solution facile pour plusieurs navigateurs sans changer le balisage.
michaelk le
Ok, je vote cette solution maintenant depuis l'ajout de la marge: -5px n'est apparemment pas une violation. J'ai ajouté une quatrième entrée à la page qui l'utilise et cela semble fonctionner réellement. jigsaw.w3.org/css-validator/…
Sandman
7

Une option consiste à envelopper le INPUTdans unDIV qui a le remplissage.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
user7116
la source
8
Remplir un conteneur div produit des résultats non identiques à l'ajout de remplissage à un champ d'entrée.
Felix Fung
Ajoutez à ce que Felix Fung a dit - Vous perdez la possibilité de cliquer avec la souris dans la zone de remplissage et de lui faire concentrer le champ de saisie - parmi d'autres problèmes plus notables. Je voulais juste souligner ce problème moins remarqué / connu - Cela me dérange infiniment lorsque j'utilise des pages Web qui utilisent ce hack.
eselk le
5

Les souvent oubliés calcpeuvent venir à la rescousse ici:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Puisque nous savons que le remplissage ajoutera à la largeur de l'élément, nous soustrayons simplement le remplissage de la largeur globale. Il est pris en charge par tous les principaux navigateurs, est réactif et ne nécessite pas de div wrapper en désordre.

XanderStrike
la source
4

J'ai eu des problèmes avec quelque chose de similaire. J'ai des tds avec des entrées de 100% et un petit rembourrage. Ce que j'ai fait, c'est compenser le rembourrage sur le td comme suit:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

padding de 8px pour inclure la bordure et le remplissage de la zone d'entrée / de texte. J'espère que cela t'aides!

Keye
la source
CETTE technique fonctionne très bien pour aligner la largeur des cellules qui contiennent des entrées remplies avec des cellules qui n'en ont pas. Appliquez simplement le padding-right de manière sélective à tout TD qui contient une entrée de largeur 100%.
Seb Barre
1

Supprimez peut-être la bordure + l'arrière-plan du input, et placez-le plutôt dans un divavec bordure + arrière-plan et largeur: 100%, et définissez une marge sur le input?

ambre
la source
C'est le genre de hack que j'utilise actuellement pour ce problème, mais je préférerais utiliser une bordure sur l'entrée pour des "raisons de style" ou autre. Mais oui, c'est comme ça que je fais actuellement, c'est une solution viable
Sandman
1

Une solution que j'ai trouvée fonctionne est de positionner absolument l'entrée avec une balise parent relativement positionnée.

<p class="full-width-input">
    <input type="text" class="text />
</p>

Le appliquer le style:

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

La seule chose à savoir est que la balise de paragraphe a besoin d'un réglage de hauteur car ses enfants positionnés de manière absolue n'augmenteront pas sa hauteur. Cela évite la nécessité de définir width: 100%en le verrouillant sur les côtés gauche et droit de l'élément parent.

Gabz
la source
0

Essayez d'utiliser des pourcentages pour votre rembourrage:

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

Si vous vous inquiétez pour les utilisateurs d'anciens navigateurs qui ne peuvent pas voir l'ombre de la boîte, donnez simplement à l'entrée une couleur d'arrière-plan subtile comme sauvegarde. Si vous utilisez des pixels pour ce genre de choses, il y a de fortes chances que vous les utilisiez ailleurs, ce qui pourrait présenter quelques défis supplémentaires, faites-moi savoir si vous les rencontrez.

stephenmurdoch
la source
-3

La seule chose que je sais pour éviter cela est d'attribuer des valeurs comme celles-ci 100% -10. Mais il a quelques problèmes de compatibilité tho.

Tarik
la source