В браузъри Mozilla и не-IE, ако опцията за списък за избор е с по-голяма дължина от ширината на избора, тя ще се покаже. Но в IE ще изреже опцията до ширината на избраното.
Има ли някакъв начин поведението на избор на IE да бъде като това на браузърите, които не са IE?
Това изглежда работи добре, като принуждава IE да преоцени избраната ширина. Работи в IE7 и IE8.
if (jQuery.browser.msie) {
jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}
css:
.set_width { width:120px; }
html:
<select class="set_width"><option>one</option><option>two</option></select>
Харесвам решението на 26design, но има 2 недостатъка:
При някои обстоятелства е възможно да се задейства събитието mouseover два пъти, което води до настройка на променливата origWidth на „автоматично“, което предотвратява връщането на избрания към оригиналния размер.
Ако текстовите стойности в падащото меню не се нуждаят от допълнително пространство, тогава избраното всъщност се свива, което изглежда странно.
Тази версия коригира и двата проблема:
if($.browser.msie) {
/* IE obscures the option text for fixed-width selects if the text
* is longer than the select. To work around this we make the width
* auto whenever the drop down is visible.
*/
$("select.fixed-width").livequery(function(){
/* Use mousedown rather than focus because the focus event gets
* interrupted and the dropdown does not appear
*/
$(this)
.mousedown(function(){
if($(this).css("width") != "auto") {
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width) {
$(this).css("width", $(this).data("origWidth"));
}
}
})
/* Handle blur if the user does not change the value */
.blur(function(){
$(this).css("width", $(this).data("origWidth"));
})
/* Handle change of the user does change the value */
.change(function(){
$(this).css("width", $(this).data("origWidth"));
});
});
}
Тестван в IE6-8
Поставих в клетка на таблица, просто се опитвах да запазя същата ширина като клетката.
$("#id" ).width($("#id" ).parent().width());
btw, благодаря за всички публикации, помага ми много.
Добре, така че ето решението, което разбрах след доста време. Той автоматично ще увеличи размера на полето за избор въз основа на максималната ширина на дъщерните опции.
<script type="text/javascript">
window.onload = function()
{
var elem = document.getElementById('test');
var values = elem.length;
var biggest_value = 0;
var biggest_option = '';
for(var i = 0; i <= values; i++)
{
if (elem.options[i])
{
var len = elem.options[i].value.length;
}
if (biggest_value < len)
{
biggest_value = len;
biggest_option = elem.options[i];
}
}
document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';
};
</script>
Полето за избор:
<select id="test">
<option value="Hello">Hello</option>
<option value="Hello Again">Hello Again</option>
<option value="Hello Yet Again">Hello Yet Again</option>
</select>
Абсолютно най-лесният начин да се уверите, че списъците за избор винаги са точно толкова широки, колкото трябва, е да позволите на браузъра да задава тяхната ширина, т.е. не задавайте ширина сами. Този „метод“ (всъщност не-метод, тъй като включва неда се прави нещо) ще работи на всеки браузър, правен някога, дори IE6.
Имам решение, което работи за мен, така че реших да продължа и да го публикувам (с някои предупреждения в долната част). Това не е най-ефективното използване на jQuery, сигурен съм, но работи както искам. По принцип имам списък с часови зони, които (очевидно) са доста дълги текстови низове.
<!--[if IE]>
<script type="text/javascript">
$(document).ready(function() {
$("select.timeZone")
.mouseover(function() {
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto")
.focus();
})
.mouseout(function() {
$(this)
.blur(function() {
$(this).css("width", $(this).data("origWidth"));
})
.change(function() {
$(this).css("width", $(this).data("origWidth"));
})
});
});
</script>
<![endif]-->
Описание:
Предупреждения:
Ето друг подход, който работи за мен:
<style>
select.limited-width {
width: 200px;
position: static;
}
select.expanded-width {
width: auto;
position: absolute;
}
</style>
<select class="limited-width"
onMouseDown="if(document.all) this.className='expanded-width';"
onBlur="if(document.all) this.className='limited-width';"
onChange="if(document.all) this.className='limited-width';">
<option>A normal option</option>
<option>A really long option which messes everything up</option>
</select>
Като превключите към position:absolute, вие премахвате елемента от потока на страницата, което помага, ако откриете, че вашето поле за избор се движи, когато го разгънете.
Избрах да разчитам на надушването на document.all като проверка за IE, тъй като го поддържа компактен и избягва необходимостта от отделна функция. Ако това не работи за вас, дефинирайте функция в условните коментари на IE и я извикайте вместо това.
Една малка грешка, ако изберете същия елемент, той няма да се свие отново, докато не преместите фокуса върху друг елемент, аз го наричам функция ;-)
for (i=1;i<=5;i++){
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
}
Използвах този начин, за да покажа падащия списък, когато ширината не е показана правилно.
Работи за IE6, Firefox и Chrome.
Имам select в клетките на таблицата и следният код свърши работа за мен:
.myClass{
width: 100%;//most of browsers
_width: auto;//ie6 hack
}
наздраве
Най-доброто решение, описано тук: http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm
