web-dev-qa-db-fra.com

Rembourrage dans les entrées brise largeur 100%

Ok, nous savons donc que le fait de placer un objet sur un objet provoque la modification de sa largeur, même s'il est défini explicitement. Bien que l'on puisse argumenter la logique derrière cela, certains éléments posent problème.

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 oeil à ceci: http://sandman.net/test/formcss.html

La deuxième entrée a son padding réglé à 5px, ce que je préfère de loin au réglage par défaut. Mais malheureusement, l’entrée augmente 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 dans l'entrée, donc je ne peux pas le réparer. La question est donc:

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

cssinputpadding
115
Sandman

En utilisant CSS3, vous pouvez utiliser la propriété box-sizing pour modifier la manière 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 lire plus à ce sujet ici: http://css-tricks.com/box-sizing/

256
Víctor Dieppa Garriga

Je ne sais pas s'il est compatible avec tous les navigateurs (cela fonctionne sous firefox et safari), mais vous pouvez essayer cette solution:

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

(Seulement posté les valeurs que j'ai changées)

7
michaelk

Une option consiste à envelopper le INPUT dans un DIV 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>
7
user7116

Les calc souvent oubliés peuvent venir à la rescousse ici:

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

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

4
XanderStrike

J'ai eu quelques problèmes avec quelque chose de semblable à ceci. J'ai tds avec des entrées de 100% et un petit rembourrage. Ce que j'ai fait était de 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 padding de l’entrée/zone de texte. J'espère que cela t'aides!

4
Keye

Une solution que j'ai trouvée 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 à prendre en compte est que la balise de paragraphe doit être réglée en hauteur, car ses enfants placés de manière absolue n'augmenteront pas sa hauteur. Cela évite d'avoir à définir width: 100% en le verrouillant à gauche et à droite de l'élément parent.

1
Gabz

Peut-être enlever la bordure + arrière-plan du input et la placer dans un div avec bordure + arrière-plan et largeur: 100% et définir une marge sur le input?

1
Amber

Essayez d’utiliser des pourcentages pour votre remplissage:

.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 êtes inquiet au sujet des 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 en guise de sauvegarde. Si vous utilisez des pixels pour ce genre de choses, alors il est probable que vous les utilisiez ailleurs, ce qui pourrait présenter quelques défis supplémentaires, faites-le-moi savoir si vous les rencontrez.

0
stephenmurdoch