Ширина выпадающего списка в IE
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
В IE раскрывающийся список имеет ту же ширину, что и раскрывающийся список (надеюсь, я правильно понимаю), тогда как в Firefox ширина раскрывающегося списка варьируется в зависимости от содержимого.
По сути, это означает, что я должен убедиться, что раскрывающийся список достаточно широк, чтобы отображать максимально длинный выбор.Из-за этого моя страница выглядит очень некрасиво :(
Есть ли какое-либо решение этой проблемы?Как я могу использовать 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'" (или что угодно) в выбранный элемент.Элемент управления YUI обеспечивает красивую анимацию, но в этом нет необходимости.Эту задачу также можно решить с помощью jquery и других библиотек (хотя я не нашел для этого явной документации).
-- поправка к редактированию:
У IE есть проблема с onmouseout для элементов управления выбором (он не считает, что наведение курсора мыши на параметры является наведением мыши на выбор).Это делает использование mouseout очень сложным.Первое решение - лучшее, что я нашел до сих пор.
вы могли бы просто попробовать следующее...
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");
}
});
});
Однако при щелчке по-прежнему будет расширяться поле выбора, а не только элементы.(и, похоже, он не работает в 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.Итак, я бы проверил браузер (т. е. IE6) и написал следующее только в этот браузер.Вот оно.Сначала проверьте браузер.
Код волшебным образом расширит раскрывающееся поле выбора.Единственная проблема с решением заключается в том, что при наведении мыши раскрывающийся список будет расширен до 420 пикселей, а поскольку overflow = скрыт, мы скрываем размер расширенного раскрывающегося списка и показываем его как 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 поддерживать :hover для всех элементов, используя файл .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, добавьте это в привязку при наведении курсора мыши:
.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>
Это позаботится о том, чтобы другие элементы сместились с места при расширении раскрывающегося списка.Единственным недостатком здесь является то, что визуальное меню списка исчезает, когда вы выбираете, но возвращается, как только вы выбираете.
Надеюсь, это кому-то поможет.
это лучший способ сделать это:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
это точно так же, как решение BalusC.Только это проще.;)
Доступен полноценный плагин jQuery.Он поддерживает бесперебойную раскладку и взаимодействие с клавиатурой, посетите демонстрационную страницу: http://powerkiki.github.com/ie_expand_select_width/
отказ от ответственности:Я закодировал эту штуку, патчи приветствуются
Решение jquery BalusC, улучшенное мной.Также используется:Брэд Робертсон прокомментируйте здесь.
Просто поместите это в .js, используйте широкий класс для желаемых комбинаций и не забудьте указать ему идентификатор.Вызовите функцию при загрузке (или 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');
})
}
}
Вы можете добавить стиль непосредственно к элементу выбора:
<select name="foo" style="width: 200px">
Таким образом, этот выбранный элемент будет иметь ширину 200 пикселей.
Альтернативно вы можете применить класс или идентификатор к элементу и ссылаться на него в таблице стилей.
Пока ни одного.Не знаю насчет IE8, но это невозможно сделать в IE6 и IE7, если вы не реализуете свою собственную функцию раскрывающегося списка с помощью javascript.В сети есть примеры того, как это сделать, но я не вижу особой выгоды в дублировании существующего функционала.
У нас то же самое в asp:dropdownlist:
В Firefox (3.0.5) раскрывающийся список — это ширина самого длинного элемента в раскрывающемся списке, ширина которого составляет около 600 пикселей или что-то в этом роде.
Кажется, это работает с IE6 и не мешает другим.Еще одна приятная вещь заключается в том, что оно автоматически меняет меню, как только вы меняете выбор в раскрывающемся списке.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
Ссылка на хеджервау (обходной путь анимации YUI) в первом лучшем ответе не работает, я думаю, срок действия домена истек.Я скопировал код до истечения срока его действия, поэтому вы можете найти его здесь (владелец кода может сообщить мне, если я нарушаю какие-либо авторские права, загрузив его еще раз)
В том же сообщении блога я писал о создании точно такого же элемента SELECT, как и обычный, с использованием меню кнопки YUI.Посмотрите и дайте мне знать, если это поможет!
На основе решения, опубликованного Сай, вот как это сделать с помощью 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';}"
Итак, чтобы сделать все это лучше, я добавил выделение внутрь элемента 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-код
<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.
Хитрость здесь заключается в использовании специализированной функции щелчка (я нашел ее здесь). Событие срабатывания каждый раз, когда элемент DropDownList выбирается с помощью jQuery).Многие из других решений здесь используют изменение обработчика событий, которое работает хорошо, но не срабатывает, если пользователь выбирает тот же вариант, который был выбран ранее.
Как и многие другие решения, фокус и нажатие мыши предназначены для того, чтобы пользователь помещал раскрывающийся список в фокус, а размытие — для случаев, когда он щелкает мышью.
Вы также можете добавить сюда какое-то обнаружение браузера, чтобы оно действовало только, т.е.Хотя в других браузерах это выглядит неплохо.
