В IE выпадающий список имеет ту же ширину, что и dropbox (я надеюсь, что у меня есть смысл), тогда как в Firefox ширина раскрывающегося списка варьируется в зависимости от содержимого.
Это в основном означает, что я должен убедиться, что dropbox достаточно широк, чтобы отображать самый длинный выбор. Это делает мою страницу очень уродливой: (
Есть ли способ обхода проблемы? Как я могу использовать CSS для установки различной ширины для dropbox и выпадающего списка?
Вот еще один пример jQuery. В отличие от всех других ответов, размещенных здесь, он учитывает все события клавиатуры и мыши, особенно клики:
if (!$.support.leadingWhitespace) { // if IE6/7/8
$('select.wide')
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });
}
Используйте его в сочетании с этим фрагментом CSS:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
Все, что вам нужно сделать, это добавить класс wide к выпадающему элементу (элементам), о котором идет речь.
<select class="wide">
...
</select>
Вот пример jsfiddle. Надеюсь, это поможет.
Создание собственного раскрывающегося списка - скорее боль, чем стоит. Вы можете использовать какой-то JavaScript, чтобы отключить работу IE.
Он использует бит библиотеки YUI и специальное расширение для фиксации блоков выбора IE.
Вам нужно будет включить следующее и обернуть элементы <select> в <span class="select-box">
Поместите их перед тегом body вашей страницы:
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>
Редактирование после принятия:
Вы также можете сделать это без использования библиотеки YUI и управления Hack. Все, что вам действительно нужно сделать, это поставить onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (или что угодно) на элементе select. Элемент управления YUI дает ему приятную анимацию, но это необязательно. Эта задача также может быть выполнена с помощью jquery и других библиотек (хотя я не нашел для этого явной документации)
- поправка к правлению:
У IE есть проблема с onmouseout для элементов управления select (он не учитывает наведение мыши на опциях, являющихся указателем мыши на выбранном). Это делает использование мыши очень сложным. Первое решение - лучшее, что я нашел до сих пор.
вы можете просто попробовать следующее...
styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"
onblur="this.style.position='';this.style.width=''"
Я попробовал, и это работает для меня. Больше ничего не требуется.
Я использовал следующее решение и, кажется, хорошо работает в большинстве ситуаций.
<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>
Примечание: для $.browser.msie требуется jquery.
@Вам нужно также добавить обработчик события размытия
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
Тем не менее, это все равно будет расширять selectbox при щелчке, а не только на элементах. (и, похоже, он не работает в IE6, но отлично работает в Chrome и IE7)
В IE6/IE7/IE8 нет способа сделать это. Элемент управления рисуется приложением, и IE просто не рисует его таким образом. Лучше всего реализовать свое собственное выпадающее меню с помощью простого HTML/CSS/JavaScript, если важно иметь раскрывающуюся одну ширину и перечислить другую ширину.
Если вы используете jQuery, попробуйте этот плагин выбора ширины IE:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Применение этого плагина делает окно выбора в Internet Explorer, как работает, работает в Firefox, Opera и т.д., позволяя элементам опции открываться на полную ширину, не теряя внешний вид и стиль фиксированной ширины. Он также добавляет поддержку дополнений и границ на поле выбора в Internet Explorer 6 и 7.
В jQuery это работает довольно хорошо. Предположим, что выпадающее меню имеет id = "dropdown".
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
Вот простейшее решение!!! Прежде чем начать, я должен сказать, что выпадающее окно выбора автоматически будет расширяться почти во всех браузерах, кроме IE6.so.. я бы сделал проверку браузера [ie, IE6] и написал следующее только этому браузеру. Вот оно. Первый проверьте браузер.
Код волшебным образом расширит поле выбора выпадающего списка. Единственная проблема с решением - onmouseover, раскрывающийся список будет расширен до 420 пикселей. И поскольку переполнение = скрытое мы скрываем расширенный размер раскрывающегося списка и показываем его как 170px, поэтому стрелка в правой части ddl будут скрыты и не могут быть замечены. но поле выбора будет расширено до 420 пикселей; что мы действительно хотим. просто попробуйте приведенный ниже код для себя и используйте его, если вам это нравится. Приветствия.
.ctrDropDown { ширина: 420px; } .ctrDropDownClick { ширина: 420px; }выше - IE6 css. общий css [для всех других браузеров] должен быть следующим.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
http://developer.yahoo.com/yui/examples/button/button-menu-select.html#
если вы хотите простое выпадающее меню &/или всплывающее меню без эффектов перехода, просто используйте CSS... вы можете заставить IE6 поддерживать: наведите указатель на весь элемент, используя файл .htc(css3hover?) с поведением (только для IE6 свойство), определенное в условно прикрепленном файле CSS.
проверьте это. Это не идеально, но оно работает, и оно только для IE и не влияет на FF. Я использовал обычный javascript для onmousedown, чтобы установить IE только для исправления.., но msie из jquery можно использовать также и в onmousedown. Основная идея - это "onchange" и размытие, чтобы вернуть окно выбора в нормальное состояние. решите, что у вас есть своя ширина для них. Мне было 35%.
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
Ответ BalusC выше работает отлично, но есть небольшое исправление, которое я бы добавил, если содержание вашего раскрывающегося списка имеет меньшую ширину, чем то, что вы определяете в своем CSS select.expand, добавьте это в привязку к mouseover:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
Это то, что я сделал, принимая бит от других людей.
$(document).ready(function () {
if (document.all) {
$('#<%=cboDisability.ClientID %>').mousedown(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboDisability.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboDisability.ClientID %>').change(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').mousedown(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboEthnicity.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').change(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
});
}
});
где cboEthnicity и cboDisability - это выпадающие меню с расширенным текстом опции, превышающим ширину самого выбора.
Как вы можете видеть, я указал document.all, поскольку это работает только в IE. Кроме того, я заключил в выпадающие списки в элементах div следующие элементы:
<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>
Это приводит к тому, что другие элементы перемещаются с места, когда расширяется раскрывающееся меню. Единственный недостаток здесь заключается в том, что визуализатор меню исчезает при выборе, но возвращается, как только вы выбрали.
Надеюсь, это поможет кому-то.
Решение jquery BalusC улучшилось мной. Используется также: Brad Robertson комментарий здесь.
Просто поместите это в .js, используйте широкий класс для ваших желаемых комбо и не подделывайте, чтобы дать ему Id. Вызовите функцию в onload (или documentReady или что-то еще).
Как простая задница, что:)
Он будет использовать ширину, которую вы определили для комбо, как минимальную длину.
function fixIeCombos() {
if ($.browser.msie && $.browser.version < 9) {
var style = $('<style>select.expand { width: auto; }</style>');
$('html > head').append(style);
var defaultWidth = "200";
// get predefined combo widths.
var widths = new Array();
$('select.wide').each(function() {
var width = $(this).width();
if (!width) {
width = defaultWidth;
}
widths[$(this).attr('id')] = width;
});
$('select.wide')
.bind('focus mouseover', function() {
// We're going to do the expansion only if the resultant size is bigger
// than the original size of the combo.
// In order to find out the resultant size, we first clon the combo as
// a hidden element, add to the dom, and then test the width.
var originalWidth = widths[$(this).attr('id')];
var $selectClone = $(this).clone();
$selectClone.addClass('expand').hide();
$(this).after( $selectClone );
var expandedWidth = $selectClone.width()
$selectClone.remove();
if (expandedWidth > originalWidth) {
$(this).addClass('expand').removeClass('clicked');
}
})
.bind('click', function() {
$(this).toggleClass('clicked');
})
.bind('mouseout', function() {
if (!$(this).hasClass('clicked')) {
$(this).removeClass('expand');
}
})
.bind('blur', function() {
$(this).removeClass('expand clicked');
})
}
}
это лучший способ сделать это:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
это точно так же, как решение BalusC. Только это проще.;)
Доступен полноценный плагин jQuery. Он поддерживает неразрывную компоновку и взаимодействие с клавиатурой, проверьте демонстрационную страницу: http://powerkiki.github.com/ie_expand_select_width/
Отказ от ответственности: я закодировал эту вещь, патчи приветствуются
Вы можете добавить стиль непосредственно к элементу select:
<select name="foo" style="width: 200px">
Таким образом, этот элемент выбора будет шириной 200 пикселей.
В качестве альтернативы вы можете применить класс или идентификатор к элементу и ссылаться на него в таблице стилей
Пока нет никого. Не знаю об IE8, но это невозможно сделать в IE6 и IE7, если вы не реализуете свои собственные раскрывающиеся списки с помощью javascript. Есть примеры, как это сделать в Интернете, хотя я не вижу большой пользы в дублировании существующих функций.
Мы имеем то же самое на asp: dropdownlist:
В Firefox (3.0.5) раскрывающееся меню представляет собой ширину самого длинного элемента в раскрывающемся списке, что составляет 600 пикселей в ширину или что-то в этом роде.
Связывание hedgerwow (анимация анимации YUI) в первом наилучшем ответе сломана, я думаю, что домен истек. Я скопировал код до истечения срока его действия, поэтому вы можете найти его здесь (владелец кода может сообщить мне, если я нарушаю авторские права, загрузив его снова)
В том же сообщении в блоге я написал о создании того же элемента SELECT, что и обычный, используя меню кнопки YUI. Посмотрите и дайте мне знать, если это поможет!
Это похоже на работу с IE6 и, похоже, не нарушает других. Другая приятная вещь заключается в том, что он автоматически меняет меню, как только вы меняете свой выпадающий список.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
Основываясь на решении, опубликованном Sai, это как сделать это с помощью jQuery.
$(document).ready(function() {
if ($.browser.msie) $('select.wide')
.bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
.bind('blur', function() { $(this).css({position:'static',width:''}); });
});
Я думал, что брошу свою шляпу на ринг. Я делаю приложение SaaS, и у меня есть меню, встроенное внутри таблицы. Этот метод работал, но он исказил все в таблице.
onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"
Итак, что я сделал, чтобы все было лучше, выбрал выбор внутри z-indexed div.
<td valign="top" style="width:225px; overflow:hidden;">
<div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
<select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
<option value="0">All</option>
<!--More Options-->
</select>
</div>
</td>
Его протестировали во всех версиях IE, Chrome, FF и Safari
//Код JavaScript
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>
//Html-код
<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
Мне пришлось обойти эту проблему и однажды придумали довольно полное и масштабируемое решение для IE6, 7 и 8 (и, очевидно, совместимо с другими браузерами). Я написал всю статью об этом прямо здесь: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Думаю, я поделился бы этим для людей, которые все еще сталкиваются с этой проблемой, поскольку ни одно из вышеперечисленных решений не работает в каждом случае (на мой взгляд).
Я пробовал все эти решения, и никто не работал полностью для меня. Это то, что я придумал
$(document).ready(function () {
var clicknum = 0;
$('.dropdown').click(
function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
$(this).css('position', '');
$(this).css('width', '');
}
}).blur(
function() {
$(this).css('position', '');
$(this).css('width', '');
clicknum = 0;
}).focus(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
}).mousedown(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
});
})(jQuery);
Обязательно добавьте раскрывающийся список для каждого раскрывающегося списка в html
Трюк здесь использует специализированную функцию щелчка (я нашел здесь Событие Fire каждый раз, когда элемент DropDownList выбран с помощью jQuery). Многие из других решений здесь используют изменение обработчика событий, которое работает хорошо, но не запускается, если пользователь выбирает тот же вариант, который был ранее выбран.
Как и многие другие решения, фокус и mousedown - это то, когда пользователь ставит раскрывающийся список в фокусе, размытие происходит, когда они нажимают.
Вы можете также захотеть зафиксировать в нем какое-то определение браузера, чтобы оно только срабатывало, т.е. Это не выглядит плохо в других браузерах, хотя