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);});
}
});
}

IE6, la bête noire des intégrateurs

Au moment où j’écris ces lignes, Microsoft Internet Explorer 6.0 est utilisé par 22.05 % des utilisateurs (source : libstat.com – juin 2008). Ce pourcentage est en constance baisse mais reste malheureusement bien trop élevé pour qu’on ne puisse tenir de ce navigateur.

Le problème est de taille, le nombre d’incompatibilité et de fonctions non supportées rendent le travail de l’intégrateur long et fastidieux. Il faut sans cesse tout au long de la découpe prévoir et vérifier le bon rendu de la mise en page.

Voici donc quelques astuces et outil qui permettent de faciliter le travail de l’intégrateur, en attendant (très longtemps) que les versions obsolètes disparaissent : Lire la suite »