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

jQuery Discussion :

Taille de champ non redimensionable


Sujet :

jQuery

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    431
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 431
    Points : 134
    Points
    134
    Par défaut Taille de champ non redimensionable
    Bonjour,

    Dans un formulaire bootstrap, j'ai un champ de saisie de type input. A chaque caractère tapé, Je teste via jquery la longueur de la chaine de caractère, et si celle-ci dépasse la largeur du champ, je diminue la taille de police, pour que toute la chaine soit toujours visible dans le champ.
    Le problème, c'est que quand il réduit la taille de police, il adapte la hauteur du champ input.
    Comment faire pour que la hauteur du champ input reste égale à la hauteur initiale, malgré le changement de taille de police?

    J'ai essayé avec du css:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    input.form-control { resize: none }

    Mais ça n'a aucun effet...

    Merci,
    Nico

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 672
    Points
    66 672
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre éclairé
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    386
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 386
    Points : 793
    Points
    793
    Par défaut
    l'attribut resize st très différent de ce que vous imaginez.

    https://developer.mozilla.org/en-US/docs/Web/CSS/resize

    En l' occurrence lorsque vous modifiez la taille de la police,
    il me semble que le navigateur ajuste l'interligne,
    et donc, le champ de saisit s'ajuste par effet de bord.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 672
    Points
    66 672
    Billets dans le blog
    1
    Par défaut
    Le souci est que l'input s'ajuste à la taille de la police à al fois en largeur mais aussi en hauteur ...
    Le lien donné était supposer te faire réfléchir sur la possibilité de calculer la largeur du texte entré afin d'attribuer une largeur à l'input ...
    Vu que tu passes par la taille de police il faudra arriver à désolidariser la hauteur de l'élément, voire peut être passer par un span ou un div en contenteditable ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 033
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 033
    Points : 44 395
    Points
    44 395
    Par défaut
    Bonjour,
    Citation Envoyé par DiverSIG
    Je teste via jquery la longueur de la chaine de caractère, et si celle-ci dépasse la largeur du champ,
    il suffit de comparer les propriétés clientWidth et scrollWidth pour voir si il y a débordement.



    Citation Envoyé par DiverSIG
    Comment faire pour que la hauteur du champ input reste égale
    il suffit de la fixer :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    input {
      height: 24px;  /* surtout pas en em ou alors en rem */
    }

    Nota: cela reste une idée bizarre, qu'advient-il lorsque la police devient franchement petite !?!

Discussions similaires

  1. [AC-2016] Webapps : Non respect de taille image + champ réference
    Par clickandgo dans le forum Access
    Réponses: 1
    Dernier message: 13/07/2017, 16h24
  2. [Delphi 2005/Oracle/ADO]Taille de champ incorrecte
    Par Frank dans le forum Bases de données
    Réponses: 20
    Dernier message: 15/04/2005, 14h12
  3. Valeur d'un champ non connu
    Par Pierre FORAZ dans le forum XMLRAD
    Réponses: 2
    Dernier message: 11/10/2004, 11h08
  4. Taille partition windows non monté linux
    Par thomas_b dans le forum Administration système
    Réponses: 3
    Dernier message: 15/06/2004, 16h56
  5. Taille des champs proportionnelle...
    Par Depteam1 dans le forum Composants VCL
    Réponses: 2
    Dernier message: 09/08/2002, 11h48

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