1. #1
    Membre habitué
    Inscrit en
    février 2009
    Messages
    335
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 335
    Points : 153
    Points
    153

    Par défaut Compatibilité text-align="right" et <select>

    Bonjour,

    Après plusieurs tests et recherches sans résultat ...

    Savez-vous s'il est possible d'aligner le texte d'un select à droite, compatible : Chrome/Safari/IE/FF/Opéra.
    j'ai essayé text-right de bootsraps, direction="rtl" et text-align="right" de CSS ...

    Quelques exemples trouvés sur internet ne semblent pas tenir compte des problèmes de compatibilité.

    Merci d'avance pour votre réponse,


  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 734
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 734
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut



    Je ne vois pas le problème :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <select lang="fr" dir="rtl">
    	<option value="1">1</option>
    	<option value="20">20</option>
    	<option value="30" selected>300</option>
    	<option value="400">400</option>
    	<option value="500">500</option>
    </select>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre habitué
    Inscrit en
    février 2009
    Messages
    335
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 335
    Points : 153
    Points
    153

    Par défaut

    Vous êtes sûr d'avoir testé ce code ?

    Chrome + FF : Carret inversé
    Safari : Carret inversé + align = left
    IE : Absence du Carret
    Opéra : Fonctionne


  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 734
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 734
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut

    Comme d'habitude, j'ai testé avec les navigateurs dignes de ce nom (non obsolètes), à savoir Chrome, Firefox et Edge.

    La flèche inversée c'est logique avec un alignement à droite !

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : août 2008
    Messages : 10 217
    Points : 20 306
    Points
    20 306

    Par défaut

    Bonjour,

    il faut savoir que l'aspect des select change d'un navigateur à l'autre (ils ont leurs propres styles)...

    Et sauf erreur de ma part (et/ou mise à jour), il est difficile de styler les <option>, à part pour color et background-color.

    Par contre, on peut styler le <select> (exemple ici).


    On peut mettre facilement le texte à droite pour le select (mais pas les options) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    select {
      text-align:right;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Membre habitué
    Inscrit en
    février 2009
    Messages
    335
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 335
    Points : 153
    Points
    153

    Par défaut

    Merci mais le style a déjà été revisité, néanmoins certaines listes affichants une incrémentation, d'où la nécessité de placer les unités à droite.

    Nom : liste.png
Affichages : 28
Taille : 2,7 Ko

    Si vous avez d'autres idées ...

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

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

    Informations forums :
    Inscription : août 2008
    Messages : 10 217
    Points : 20 306
    Points
    20 306

    Par défaut

    Si tu avais du code.....
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre habitué
    Inscrit en
    février 2009
    Messages
    335
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 335
    Points : 153
    Points
    153

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    Si tu avais du code.....
    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
    /* Texte à droite dans un select */
    select.text-right { 
    	/* Compatibilité :
    	   ---------------
    	   IE : Ok
               Chrome/FF/Opéra : Décale la scrollbar à gauche
               Safari : align = left
       	*/
       	/* direction: rtl; */
    }
    option.text-right {
    	/* Compatibilité : 
    	   ---------------
    	   Chrome/FF/Opéra : Ok
               Safari/IE : align = left
       	*/
        direction: rtl;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <select class="form-control text-right">
      <?php
        for($i = 1; $i <= 15; $i++) {
      ?>  
       <option value="<?php echo $i; ?>" class="text-right"><?php echo $i; ?></option>
      <?php 
       }            
      ?>
    </select>
    Chrome/FF/Opéra : Fonctionnel
    Safari/IE : align = left

    Nota : text-right est à la base une classe de bootstrap 3.

  9. #9
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 904
    Points : 25 327
    Points
    25 327

    Par défaut

    Bonjour,
    avec IE c'est pas gagné du tout sauf à passer par un <select> entièrement customisé.

    Tu peux toujours passer par des espaces insécables
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <select>
      <option value="1">&nbsp;&nbsp;1</option>
      <option value="20">&nbsp;20</option>
      <option value="30">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
    </select>
    il te faudra néanmoins mettre une police « monospace ».

  10. #10
    Membre habitué
    Inscrit en
    février 2009
    Messages
    335
    Détails du profil
    Informations forums :
    Inscription : février 2009
    Messages : 335
    Points : 153
    Points
    153

    Par défaut

    Peut-être ce problème sera t-il réglé dans une version ultérieure de CSS ...

    Merci pour ces idées.

Discussions similaires

  1. Réponses: 7
    Dernier message: 12/03/2007, 11h22
  2. Problème de padding avec text-align:right sous IE
    Par Oluha dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 07/02/2007, 14h18
  3. [text] probleme avec simple quote
    Par bor1s dans le forum Langage SQL
    Réponses: 3
    Dernier message: 22/12/2005, 16h03

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