Blackotine

Corriger la largeur des options d’une liste select dans IE et afficher le contenu masqué

Voici un petit javascript permettant de corriger un bug d’Internet Explorer (qui a dit « Un de plus ! » ?) .

Il s’agit du cas où les options d’une liste à choix multiples d’un formulaire, sont trop longues pour rentrer dans la taille de cet élément select lorsqu’on a fixé sa taille en CSS. Dans un navigateur moderne, quand on visualise les choix disponibles, la taille de la liste est adaptée (la taille de l’élément parent select n’est pas modifiée). Dans ce cher IE, la liste garde la même taille que le select et on ne voit donc pas la totalité des options, n’ayant que les n premiers caractères affichés.

Les images valant mieux qu’un long discours, en voici deux pour illustrent ce problème. Ici, j’ai fixé la largeur à 300px :

Avec Firefox, Safari, Chrome, Opéra… :

Avec Internet Explorer toutes versions confondues :

Comme on peut le voir, avec IE, si les contenus des options sont long, ils sont tronqués, ce qui n’est pas très pratique.
Pour corriger ce problème un petit javascript qui ne sera executé que sous Internet Explorer.
Le principe est le suivant : On recherche tous les champs select (on peut être plus précis sur le sélecteur si besoin). On passe la largeur en auto le temps de récupérer la largeur nécessaire pour un affichage correct. Lors de l’ouverture de la liste, on applique cette largeur.
Pour ne pas modifier la mise en page, j’ai choisi de passer la liste en positionnement absolu lorsque sa taille est modifiée. C’est un choix qui pourrait avoir des conséquence sur votre mise en page. A vous de modifier ou de proposer une meilleure solution.

P.S : C’est à base de Mootools, mais adaptable à d’autres frameworks si besoin.

if(Browser.Engine.trident){
function adjustWidth(el,m){
el.setStyle('width',m+'px');
el.setStyle('position','absolute');
}
function reinitWidth(el,s,p){
el.setStyle('width',s);
el.setStyle('position',p);
}
$$('form select').each(function(cb){
var initsize = cb.getStyle('width'),initposition = cb.getStyle('position'),maxsize = 0;
cb.setStyle('width','auto');
maxsize=cb.offsetWidth;
cb.setStyle('width',initsize);
if (maxsize > initsize.substring(0,initsize.length-2)) {
cb.addEvent('mousedown',function(e){adjustWidth(cb,maxsize);});
window.document.addEvent('click', function(e) {if(e.target != cb) reinitWidth(cb,initsize,initposition);});
cb.addEvent('change',function(e){reinitWidth(cb,initsize,initposition);});
}
});
}

• Publié dans : CSS, Javascript
• 3 commentaires »