У меня проблема, когда раскрывающийся список в IE 6/7 ведет себя следующим образом:

Вы можете видеть, что раскрывающийся список width недостаточно широк для отображения всего текста без расширения общего раскрывающегося списка.
Однако в Firefox проблем нет, так как он expands the width соответственно. Это то поведение, которое мы хотим в IE 6/7:

Мы рассмотрели различные способы использования onfocus, onblur, onchange, keyboard and mouse events, чтобы попытаться решить проблему, но все же остались некоторые проблемы.
Мне было интересно, решил ли кто-нибудь эту проблему в IE 6/7 без использования каких-либо инструментов / фреймворков (YUI, Ext-JS, jQuery и т. д.…).



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я бы рекомендовал сделать выбор шире. Firefox дружелюбно относится к этому и расширяет ширину параметра, чтобы вы могли видеть его значение, но это не решает проблему, заключающуюся в том, что после выбора параметра вы не сможете точно увидеть, что вы выбрали в качестве пользователя, если вы не сделаете выбор шире. Поэтому с точки зрения удобства использования я бы посоветовал просто разрешить браузеру изменять размер выделения в зависимости от его содержимого или установить ширину, достаточно широкую для значения самого широкого содержимого параметра.
Я думаю, что если вы оставите пустую ширину в элементе управления, она изменится в соответствии с данными в элементе управления.
[EDIT] Да, тестировал его в веб-приложении vs2005. Добавлен элемент управления и вставлены элементы. Он настроен на самый длинный элемент в версии 7.0. Когда я оговорил ширину, он больше не делал этого.
[РЕДАКТИРОВАТЬ 2] Единственная проблема заключается в том, что текстовое поле раскрывающегося списка также настраивается. Это может нарушить ваш пользовательский интерфейс. Так что это может быть не то решение, которое вы ищете.
[РЕДАКТИРОВАТЬ 3] Это определенно другой способ рендеринга. Я думаю, что единственный способ преодолеть это - создать свой собственный элемент управления, аналогичный тому, что предлагалось здесь
Как вы заполняете DropDownList. Я использую следующий код для заполнения DropDownList, и он регулирует ширину в соответствии с наибольшим отображаемым текстом:
private void BindData()
{
List<Foo> list = new List<Foo>();
list.Add(new Foo("Hello"));
list.Add(new Foo("bye bye"));
list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));
ddl1.DataSource = list;
ddl1.DataTextField = "Text";
ddl1.DataBind();
}
Ах да, не определяйте явно ширину DropDownList.
Возможно ли что-то подобное в вашей ситуации?
http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php
Ширина раскрывающегося списка увеличивается / уменьшается при наведении курсора мыши.
Проблема в том, что мы не хотим, чтобы размер изменялся автоматически, давайте выделим проблему именно для этой конкретной проблемы. Хотя я согласен с тем, что с точки зрения удобства использования это не идеально, я все же хотел бы решить эту проблему.
У нас есть раскрывающийся список с фиксированной шириной, и мы хотим, чтобы он вел себя как в FireFox 7, как показано выше.
Я тестировал это на IE7, и он соответственно расширяется. Вы уверены, что не используете какой-то странный CSS, который заставляет его иметь такой размер только в IE 6/7? (Можно настроить таргетинг на определенные браузеры, используя странные хаки селектора CSS, такие как '* html')
Вы установили ширину на элементе управления? установите его на 100 и посмотрите, что произойдет. Я думаю, это то, к чему он пытается добраться.
По сути, если вам действительно нужно ФАКТИЧЕСКОЕ текстовое поле, вам нужно будет выбрать одно или другое (определить или не определить ширину). Это классический пример трудностей кодирования для всех используемых браузеров, и на самом деле нет никакого способа обойти его, пока компании не соберутся вместе и не скажут: «Так оно и будет. НАВСЕГДА».
В качестве альтернативы вы можете использовать самодельное решение, упомянутое в другом ответе. В вашем случае я бы порекомендовал это.
У Этот парень была та же проблема, что и у вас, и он придумал решение. Это немного похоже на взлом и зависит от того, как у вас настроен пользовательский интерфейс, но это вариант. Я надеюсь, что это помогает.
редактировать
Ссылка, которую я начал искать, на самом деле была Вот этот, что и предложил Тим. Думаю, это лучшее решение, чем моя первоначальная находка. 2-е изменение Это решение фактически зависит от фреймворка YUI, но я бы не подумал, что репликация основной идеи, стоящей за ним, будет слишком сложной. В остальном 1-я ссылка тоже подойдет, и намного проще.
Удачи.
Единственная проблема со второй ссылкой заключается в том, что я пробовал их пример, и он сильно зависит от YUI.
Без проблем. Причина, по которой я не могу использовать YUI или любой другой инструментарий / фреймворк, заключается в том, что это клиентский проект, который не позволяет этого.
<script type = "text/javascript">
var MAX_WIDTH = 500; //the biggest width the select is allowed to be
function biggestOption(elem) {
var biggest = 0;
for (var i=0;i<elem.options.length;i++) {
if ( elem.options[i].innerHTML.length > biggest ) {
biggest = elem.options[i].innerHTML.length;
}
}
return roughPixelSize(biggest);
}
function roughPixelSize(charLength) {
//this is far from perfect charLength to pixel
//but it works for proof of concept
roughSize = 30 + (charLength * 6);
if (roughSize > MAX_WIDTH) {
return MAX_WIDTH;
} else {
return roughSize;
}
}
function resizeToBiggest(elem) {
elem.style.width = biggestOption(elem);
}
function resizeToSelected(elem) {
elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
}
</script>
<select onmouseover = "resizeToBiggest(this)" style = "width:70px" onchange = "resizeToSelected(this)" onblur = "resizeToSelected(this)" >
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
<option>this is some really really realy long text</option>
<option>test 4</option>
<option>test 5</option>
</select>
Я не думаю, что то, что вы хотите делать, возможно без большой работы или использования фреймворка. Выше есть кое-что, что вы можете попробовать / возиться с ...
мы не всегда можем предположить, что содержание самого широкого варианта, так как это могут быть данные, созданные пользователем. Я согласен с тем, что с точки зрения удобства для пользователя должны быть другие способы решения этой проблемы, но давайте посмотрим, сможем ли мы решить эту проблему и изолировать ее от других философий.