IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Différence de width entre un select et un input [HTML 5]


Sujet :

HTML

  1. #1
    Membre éprouvé Avatar de leminipouce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    janvier 2004
    Messages
    754
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : janvier 2004
    Messages : 754
    Points : 1 287
    Points
    1 287
    Par défaut Différence de width entre un select et un input
    Salut à tous,

    Je viens vous poser une petite question pour savoir si quelqu'un saurait pourquoi il y a une différence dans la manière dont est implémentée la "width" sur les balises "input" et "select" ?

    Typiquement, le width d'un input ne prend pas en compte le padding, tandis que le width d'un select lui, le prend en compte.

    J'ai fait un tout petit jsFiddle pour illustrer la chose : http://jsfiddle.net/leminipouce/vqcBg/4/

    Ou si vous préférez le tester par vous même (code KISS, pure HTML, sans CSS...)...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </head>
        <body>
            <div>
                <select style="width:400px;border: 5px; border-color: black; border-style: solid; margin: 20px; padding: 10px;">
                    <option>Toto</option>
                    <option>Titi</option>
                </select>
            </div>
     
            <div>
                <input type="text" style="width:400px;border: 5px; border-color: black; border-style: solid; margin: 20px; padding: 10px;" value="Tutu"/>
            </div>
        </body>
    </html>
    La différence est claire... Et on peut voir tout le détail du calcul avec firebug ou la section "metrics" du debug Chrome. ...ce qui me permet d'ajouter qu'on a quand même un comportement cohérent entre Chrome et FF.

    Typiquement, l'implémentation pour le select ne respecte pas la norme... http://www.w3schools.com/css/css_boxmodel.asp ! --> son attribut width devrait s'appliquer sur le contenu. La taille du padding, border et margin étant en sus dans la largeur totale du composant.

    Par avance, Merci pour votre aide.
    Olivier.
    Si , et la ont échoué mais pas nous, pensez à dire et cliquez sur . Merci !

    Ici, c'est un forum, pas une foire. Il y a de respectables règles... à respecter !

  2. #2
    Membre émérite
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2007
    Messages : 1 165
    Points : 2 778
    Points
    2 778
    Par défaut
    et oui, selon les navigateurs, les éléments ont des valeurs par défaut (du padding, de la border, etc ...), sinon ce n'est pas marrant
    D'où les "reset CSS". ça consiste à réinitialiser toutes les balises pour leur enlever les tailles et autres fioritures misent par défaut selon le navigateur.

    Pour ton problème, il suffit de dire au navigateurs que la taille de chaque élément soit celle de "width". Ainsi plus de soucis de mise en page ou d'élément qui déborde :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    box-sizing:border-box;
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    Personnellement j'utilise ça sur tous les éléments *{ }.

    Comme d'habitude, pour IE < 8 il faudra utiliser du polyfill (Celui que j'utilise). Pour la compatibilité Chrome, IE8+, Opera, Safari 5.1+ peuvent supporter sans le préfixe vendeur. Firefox en a besoin lui car y'avait un problème sur certains éléments jusque récemment. Mais il est préconisé d'utiliser tous les préfixes vendeurs (notamment pour que ça soit reconnu sur certains vieux IOS et Android. Compatibilité MDN

  3. #3
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    décembre 2011
    Messages
    1 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 699
    Points : 3 845
    Points
    3 845
    Billets dans le blog
    6
    Par défaut
    Pour avoir posé la question et donné la réponse, je vous aime.

    ---
    Debug the Web together!

  4. #4
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 335
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : août 2007
    Messages : 2 335
    Points : 8 097
    Points
    8 097
    Par défaut
    Comme quoi on trouve vraiment l'amour surtout ailleurs (pour citer un site très célèbre).
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  5. #5
    Membre éprouvé Avatar de leminipouce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    janvier 2004
    Messages
    754
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Agroalimentaire - Agriculture

    Informations forums :
    Inscription : janvier 2004
    Messages : 754
    Points : 1 287
    Points
    1 287
    Par défaut
    Trop bien !!!

    Perso j'ai utilisé l'option content-box qui me correspond bien, mais je dois reconnaître que ça marche super bien !

    Merci beaucoup.

    PS : Pour ceux qui veulent voir la preuve en image, j'ai mis à jour mon jsFiddle : http://jsfiddle.net/leminipouce/vqcBg/5/

    PS 2 : @Muchos : Merci beaucoup, ça me touche ... en plus j'adore les roses
    Si , et la ont échoué mais pas nous, pensez à dire et cliquez sur . Merci !

    Ici, c'est un forum, pas une foire. Il y a de respectables règles... à respecter !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Différence entre 2 select
    Par Moucheron dans le forum HyperFileSQL
    Réponses: 8
    Dernier message: 03/05/2012, 11h26
  2. Réponses: 1
    Dernier message: 21/06/2010, 00h20
  3. Différence entre un select max et un select top 1
    Par Delphi-ne dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 24/06/2008, 10h05
  4. Réponses: 6
    Dernier message: 06/12/2005, 17h51
  5. Différences d'affichage entre IE et FF
    Par Tot-O dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/09/2005, 19h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo