IE select width bug
2007 nov 21 12:07
7Elönt a hideg verÃték, amikor az űrlapjaidba olyan select mezÅ‘ket kell tenni melyek tartalma bazi széles, de a design keskeny?
Újabb és újabb okok miatt utálod az Internet Explorert?
Kis jQuery csuklógyakorlat és a problémád tovaszáll - még ha többé kevésbé félmegoldás is.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | (function($) { if(jQuery.browser.msie) { $('select.fixedWidth').each(function(i,s) { s.origWidth = s.offsetWidth; s.setWidth = new Number( s.className.match(/.* w(\d{1,3}).*/)[1]); }).wrap('<div class="fixedWidth"></div>'); $('div.fixedWidth').each(function(i,s) { $(s).css('width', $(s).find('select.fixedWidth')[0].setWidth ) .append('<div class="fake"><select></select></div>'); $(s).find('div.fake select') .css({marginLeft: eval(($(s).find('select.fixedWidth')[0].origWidth-22) * -1)}) .change(function(){ $(s).find('select.fixedWidth')[0].selectedIndex = this.selectedIndex; }); $(s).find('select.fixedWidth') .change(function(){ $(s).find('div.fake select')[0].selectedIndex = this.selectedIndex; }) .find('option') .clone(true) .appendTo( $(s).find('div.fake select') ); }); } })(jQuery); |
Félmegoldás, mert
- a nyilacska is működik, jobb mintha képpel cserélnénk le, de rosszul pozÃcionál
- js nélkül, ha kell a design, marad a crop, vagy más kerülőút
- mert még mindÃg az IE szarjait kerülgetjük…
Uhhh, hát inkább kihagyom…:) Baromi szar IE6 alatt…
Az select replace -es cucc se tökéletes. Sőt.
meg beta :D
fura amugy, hogy ie ennyire figyelmen kivul hagyja a poziciokat
Én ezen nem csodálkozom. Fura az lenne, ha nem haná figyelmen kÃvül :D
Arról nem beszélve, hgoy miért nem lehet normálisan deselni a selec-et. Talán a saját dtd megoldás?
Bocs, hogy belekotty (én többnyire csak használom, amit találok) de erre a problémára spec. egy megoldást ismerek: az egér hatására kellÅ‘ szélességűre “nyúló” selectet.
Viszont ha sikerülne rendesen pozicionálni a listát, akkor a Te megoldásod nagyságrendekkel elegánsabb lenne - és boldogan lecsapnék rá. :)
Szerintem a minta JS kód mellé nagyon odakivánkozik a CSS rész is, mert ez a megoldás valójában CSS trükk.
Ötletnek nem rossz, de a juzerek közül sokan autómatikusan a nyilra kattintanak… sajnos.