Ширина раскрывающегося списка в IE
В IE раскрывающийся список имеет ту же ширину, что и раскрывающийся список (надеюсь, я понимаю), тогда как в Firefox ширина раскрывающегося списка зависит от содержимого.
По сути, это означает, что я должен убедиться, что Dropbox достаточно широк, чтобы отображать как можно более длинный выбор. Из-за этого моя страница выглядит очень некрасиво :(
Есть ли способ решения этой проблемы? Как я могу использовать CSS, чтобы установить разную ширину для Dropbox и раскрывающегося списка?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 27
Вы можете добавить стиль непосредственно к элементу select:
<select name = "foo" style = "width: 200px">
Таким образом, этот элемент выбора будет шириной 200 пикселей.
В качестве альтернативы вы можете применить класс или идентификатор к элементу и ссылаться на него в таблице стилей.
Пока нет ни одного. Не знаю об IE8, но это невозможно сделать в IE6 и IE7, если вы не реализуете свои собственные функции раскрывающегося списка с помощью javascript. В Интернете есть примеры того, как это сделать, хотя я не вижу особой пользы в дублировании существующих функций.
В IE6 / IE7 / IE8 нет возможности сделать это. Элемент управления отрисовывается приложением, а IE просто не отрисовывает его таким образом. Лучше всего реализовать собственное раскрывающееся меню с помощью простого HTML / CSS / JavaScript, если так важно, чтобы раскрывающийся список имел одну ширину, а список - другую ширину.
Создание собственного раскрывающегося списка - это больше хлопот, чем оно того стоит. Вы можете использовать некоторый 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 и контроля взлома. Все, что вам действительно нужно сделать, это поместить onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (или что угодно) на выбранный элемент. Элемент управления YUI дает ему красивую анимацию, но в этом нет необходимости. Эту задачу также можно выполнить с помощью jquery и других библиотек (хотя я не нашел для этого явной документации)
- поправка в правку:
У IE есть проблема с onmouseout для элементов управления выбора (он не считает, что наведение указателя мыши на параметры является наведением указателя мыши на выделение). Это делает использование mouseout очень сложным. Первое решение - лучшее, что я нашел до сих пор.
Я получаю 404 по обеим ссылкам
Проблема с этим исправлением заключается в том, что у вас есть динамический выбор, например, в приложении электронной коммерции для атрибутов продукта. Вы никогда не узнаете идентификаторы всех выпадающих списков.
Ссылки больше не 404, но показывают то, что я считаю вредоносным спамом. Я действительно рассматривал возможность голосования против, но я буду любезен и просто укажу на это.
То же самое и с выпадающим списком asp::
В Firefox (3.0.5) раскрывающийся список - это ширина самого длинного элемента в раскрывающемся списке, примерно 600 пикселей в ширину или что-то в этом роде.
В 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");
}
});
});
@ Если вам нужно добавить обработчик события размытия
$(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");
}
});
});
Тем не менее, это по-прежнему будет расширять поле выбора при щелчке, а не только элементы. (и кажется, что в IE6 он не работает, но отлично работает в Chrome и IE7)
Я использовал следующее решение, и, похоже, оно хорошо работает в большинстве ситуаций.
<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.
Для всех, кто чувствует сонливость, которые должны быть выключены мышью, а не сверху - мне потребовалось несколько минут, чтобы увидеть проблему
Вот самое простое решение.
Прежде чем начать, я должен сказать, что раскрывающееся поле выбора будет автоматически расширяться почти во всех браузерах, кроме IE6. Итак, я бы проверил браузер (например, IE6) и напишу следующее только этому браузеру. Вот оно. Сначала проверьте браузер.
Код волшебным образом расширяет раскрывающееся поле выбора. Единственная проблема с решением - onmouseover раскрывающийся список будет расширен до 420 пикселей, и, поскольку overflow = hidden, мы скрываем размер раскрывающегося раскрывающегося списка и показываем его как 170 пикселей; Таким образом, стрелка справа от ddl будет скрыта и не будет видна. но поле выбора будет расширено до 420 пикселей; чего мы действительно хотим. Просто попробуйте приведенный ниже код для себя и используйте его, если он вам нравится.
.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}
<div style = "width:170px; overflow:hidden;">
<asp:DropDownList runat = "server" ID = "ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover = "this.className='ctrDropDownClick';" class = "ctrDropDown" onBlur = "this.className='ctrDropDown';" onMouseDown = "this.className='ctrDropDownClick';" onChange = "this.className='ctrDropDown';"></asp:DropDownList>
</div>
Это CSS IE6. Общий CSS для всех других браузеров должен быть таким, как показано ниже.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
если вам нужно простое раскрывающееся и / или всплывающее меню без эффектов перехода, просто используйте CSS ... вы можете заставить IE6 поддерживать: наведите указатель мыши на все элементы, используя файл .htc (css3hover?) с поведением (только свойство IE6), определенным в условно прикрепленный файл CSS.
Вот еще один пример на основе 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. Надеюсь это поможет.
+1: Из всех предложенных здесь решений это сработало для меня лучше всего. Мне также нужно было внести изменения в CSS и HTML, чтобы он работал в моем случае. Так много работы для того, что должно работать из коробки.
Я уже использую Richfaces (включая jQuery), так что это тоже идеально подходит для меня. Ваше здоровье!
Работает с IE7, а не с IE6 - есть ли настройка для IE6?
@DMin: К сожалению, мы не поддерживаем устаревшие и устаревшие браузеры, такие как IE6.
@BalusC: :) Я знаю, что мой друг IE отстой - тем не менее, я использовал ваш ответ, он работал для IE7 - написал отдельный код для IE6, который включал ваш ответ + привязку. ('Mouseenter' .. - отлично работал - Спасибо в любом случае! :)
Отличный ответ! Работал как шарм. +1!
Я также добавил обработчик изменений. Это делает вещи немного менее запутанными, по крайней мере, если вы используете контейнер div, чтобы скрыть триггер выбора при его расширении. Добавьте эту строку прямо над размытым: .bind ('change', function () {$ (this) .removeClass ('expand clicked');})
Можем ли мы реализовать это без Auto (выравнивание соседнего HTML-контроллера изменилось из-за auto)? В основном это должно работать как FF
вам также необходимо установить min-width: 150px; в select.expand
@dued: просто добавьте $.browser.version < 9.
Должен ли он изменяться при наведении? Немного раздражает ... было бы лучше, если бы он мог изменять размер только при расширении.
В зависимости от ваших других правил css - возможно, вам придется добавить! Important к ширине .. width: auto !important;
Мне пришлось настроить его, потому что событие mouseout не позволило мне выбрать что-либо в развернутом поле (оно продолжало скрываться), и я добавил min-width, чтобы поле не сжималось: var width = '235px'; select.bind('focus mouseover', function(){ $(this).css('width', 'auto'); $(this).css('min-width', width); }) .bind('blur', function(){ $(this).css('width', width); $(this).css('min-width','auto'); });
jsfiddle больше не поддерживает IE8, на всякий случай, если кому-то интересно, почему они не могут просмотреть ссылку, указанную в ответе для этого браузера.
вы можете просто попробовать следующее ...
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=''"
Я пробовал, и у меня это работает. Больше ничего не требуется.
Круто, я немного улучшил его (используя условный комментарий для обнаружения IE) и добавил несколько комментариев, он отлично работает, без jQuery или других библиотек. См. Здесь: jsbin.com/ubahe5/edit - пожалуйста, ИЗМЕНИТЕ свой ответ, который Я ХОЧУ ДАЙТЕ ВАМ +1, но не могу, потому что раньше я голосовал неправильно.
проверьте это ... это не идеально, но работает, только для 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%'"
Ссылка 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");
}
});
});
Приведенный выше ответ BalusC отлично работает, но есть небольшое исправление, которое я бы добавил, если содержимое вашего раскрывающегося списка имеет меньшую ширину, чем то, что вы определяете в своем CSS select.expand, добавьте это в привязку наведения мыши:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
Если вы используете jQuery, попробуйте этот плагин выбора ширины IE:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Применение этого плагина заставляет поле выбора в Internet Explorer работать так же, как в Firefox, Opera и т. д., Позволяя элементам параметров открываться на полную ширину без потери внешнего вида и стиля фиксированной ширины. Он также добавляет поддержку заполнения и границ в поле выбора в Internet Explorer 6 и 7.
Это то, что я сделал, взяв кусочки из чужих вещей.
$(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 улучшено мной. Используется также: комментарий здесь Брэда Робертсона.
Просто поместите это в .js, используйте широкий класс для желаемых комбинаций и не пытайтесь присвоить ему идентификатор. Вызовите функцию в 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's 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');
})
}
}
Основываясь на решении, опубликованном Сай, вот как это сделать с помощью 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:''}); });
});
это лучший способ сделать это:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
это точно так же, как решение BalusC. Только так проще. ;)
Я повторно протестировал ваш css, и он работает в Chrome и немного в Firefox, но не в IE8. (Может быть, мой IE8 - другая версия?) С тех пор я придумал собственное решение на основе js. См. tahirhassan.blogspot.co.uk/2013/02/…
Немного поигрался в IE8 с этим, и позже это помогло. Мне просто нужно было установить родительский <td> на фиксированную ширину, переместить верхнее значение и ¡ahí estuvo !. Спасибо
Думал бросить шляпу на ринг. Я делаю приложение 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';}"
Итак, что я сделал, чтобы все было лучше, так это бросил выделение в div с z-индексом.
<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:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
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
Думал, что поделюсь этим для людей, которые все еще сталкиваются с этой проблемой, поскольку ни одно из вышеперечисленных решений не работает во всех случаях (на мой взгляд).
Доступен полноценный плагин jQuery. Он поддерживает неразрывную раскладку и взаимодействие с клавиатурой, посмотрите демонстрационную страницу: http://powerkiki.github.com/ie_expand_select_width/
отказ от ответственности: я закодировал эту вещь, патчи приветствуются
Я пробовал все эти решения, и ни одно из них не помогло мне полностью. Вот что я придумал
$(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
Уловка здесь заключается в использовании специальной функции щелчка (я нашел ее здесь Событие срабатывает каждый раз, когда элемент DropDownList выбирается с помощью jQuery). Многие из других решений здесь используют изменение обработчика событий, которое работает хорошо, но не срабатывает, если пользователь выберет тот же вариант, что был выбран ранее.
Как и многие другие решения, focus и mousedown используются, когда пользователь помещает раскрывающийся список в фокус, а размытие - когда они щелкают мышью.
Вы также можете добавить в него какое-то обнаружение браузера, чтобы оно влияло только на т.е. Хотя в других браузерах это выглядит неплохо
решение: используйте javascript и css для автоматической регулировки ширины при наведении курсора мыши (и других событиях клавиатуры ...). читайте здесь: css-tricks.com/select-cuts-off-options-in-ie-fix лучшее решение (менее инвазивное)