Se connecter / S'enregistrer
Votre question
Résolu

gérer le débordement d'un select

Tags :
  • Select
Dernière réponse : dans Programmation
30 Mars 2015 01:22:18

Bonjour,

J'ai un souci avec des select avec Mozilla et Safari, sachant que cela marche bien avec Opera, IE et google chrome (je parle des dernières versions pour windows).

J'ai sur une page de mon site 2 select cote à cote (pour maximiser la place disponible en dessous).
Mais certaines des lignes (mes options) de ces select sont assez longues, ce qui conduit à avoir la case des select très longue et cela me rajoute un ascenseur que je ne veux pas.
Je fixe donc la taille du select à un maximum (avec un width) pour que cela tienne.

Ce faisant, lorsqu'on clique sur les select, les lignes qui apparaissent débordent :
- sur le select de gauche, cela déborde à droite, vers le centre de l'écran, et tout va bien.
- sur le select de droite, cela déborde "intelligemment" à gauche (là aussi vers le centre de l'écran donc) pour opera et google chrome, les lignes sont donc bien lisibles. Sur IE, cela déborde des 2 côtés mais sans sortir de l'écran donc tout va bien aussi. Mais sur Firefox et Safari, cela déborde encore à droite, donc cela sort de l'écran et beaucoup de lignes sont illisibles.

Comme le code de mon site est un peu pollué par beaucoup de feuilles de style et autre, je vous ai fait une petite page simplifiée pour illustrer tout cela : cliquez ici pour voir un exemple

Un affichage de la page de ce lien sur un des navigateurs cités vous montrera tout de suite que cela marche... ou pas !

Je ne vous mets pas le code correspondant, un simple 'afficher le code source' vous montrera qu'il est des plus minimalistes.

Je voulais savoir s'il y avait une solution pour imposer aux navigateurs un débordement sur la gauche sur mon select de droite.

Merci pour votre aide.

Autres pages sur : gerer debordement select

30 Mars 2015 03:28:26



Malheureusement cela n'est pas personnalisable par css ...

Mais j'ai plus ou moins une solution pour toi ...

Dans un premier temps rajoute des title dans t'es option cela forceras le navigateur a afficher la string en entière sur l’écran au survole de la sourie
Puis ensuite a l'aide d'un petit js tu tronc les string trop longue ...

http://jsfiddle.net/doniyor/wCUA6/77/



m
0
l
30 Mars 2015 07:36:06

Merci, je me doutais que ce n'était pas possible et que la meilleure solution était... de changer de navigateur, lol
Car ça marche avec 3 navigateurs et changer mon code aura un impact sur tous, ce qui diminuera globalement la qualité de mon site !
m
0
l
Contenus similaires
30 Mars 2015 17:21:36

A tu tester le code que j'ai donnée en exemple ? qu'en pense tu ?
m
0
l
30 Mars 2015 20:11:26

J'ai suivi ton lien pour voir ce que cela donnait. J'ai déjà vu ce type de solution ailleurs, ce qui est très bien quand il n'y a pas d'autres alternatives. Mais j'en vois au moins 3 :
- réduire la longueur de mes lignes (c'est un peu comme lorsque tu vas sur un site où on te restreint dans le nombre de caractères de ton message, tu fais avec)
- l'autre est plus complexe : ces 2 listes ne sont jamais sélectionnées en même temps, elles permettent de choisir entre 2 types différents, un peu comme si j'avais un menu avec 2 sous-menus : en cliquant sur la première liste, on voit le premier sous-menu et... tu m'as compris pour l'autre liste. Une autre solution serait donc d'avoir une liste très courte à 2 choix (menu 1 et menu 2) et d'avoir 2 grands listes, une hidden et l'autre affichée en fonction du choix de la première liste.
- la 3ème solution... est d'abandonner les "select" et d'en simuler avec des div et du java : sur mon site, j'ai simulé (en l'améliorant...) le fonctionnement de "marquee" que j'utilisais mais qui est deprécié et qui va sûrement disparaitre un jour, alors simuler un select ne me semble pas insurmontable...

Je n'ai pas encore fait mon choix entre ta solution et les 3 miennes.

Sachant que pour moi, c'est un bug de navigateur plus qu'autre chose : ce qui marche bien avec les "title", qui apparaissent à droite ou à gauche de la souris selon la place disponible sur l'écran, devrait se faire aussi pour ces débordements... D'ailleurs c'est le cas avec opera, google chrome et IE ! Alors je me dis qu'il y aura sûrement un jour une nouvelle version (surtout pour Firefox) qui règlera cela sans que je n'ai rien à faire :love: 
m
0
l

Meilleure solution

8 Avril 2015 05:06:50

Bonjour,
Avec les select on peut pas faire grand chose. Une solution existe avec jquery. Il suffit de remplacer les select par des div ainsi il y a retour a la ligne et donc aucun débordement...et c'est plus jolie
ex ici: http://pioul.fr/jquery-simpleselect.
partage
11 Avril 2015 03:11:44

Ca a l'air génial, c'est exactement ce que je cherchais : j'avais essayé de trouver quelque chose avec jquery, mais je n'ai pas du avoir de chance, mes recherches n'avaient rien donné.
Je ne connais pas jquery, mais je vais m'y mettre maintenant, c'est sûr.
Un grand merci pour ton aide !
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS