Главная » Широкий выпадающий лист под узким селектом

Широкий выпадающий лист под узким селектом

Довольно часто мы попадаем в ситуацию, в которой в угоду дизайну или по другим причинам, select-box должен быть узким, с жестко заданной шириной, а варианты выпадающего меню в Интернет Эксплорере в такой ситуации фактически не читаемы.

Стандартными средствами это решить нельзя, но существует небольшой хак (да простят меня боги-валидаторы), который позволяет отменить жестко заданную ширину для элемента option внутри нашего select-box‘a. Смотрим в продолжении.
Если это наш select:

<select style="width: 200px" class="class"> то вот нужный нам css-хак:

.class{behavior:expression(window.dropdown_menu_hack!=
null?window.dropdown_menu_hack(this):0);}



5 Комментариев »

  1. 1  Плюс Минус  0

    имхо неплохо бы было пример выкладывать, чтобы сразу можно было и результат увидеть

    Комментарий by grimskin — Декабрь 21, 2006 @ 7:59 pm | Цитировать

  2. 2  Плюс Минус  0

    Grimskin
    Согласен, в следующий раз попробую организовать.

    Комментарий by neutrino — Декабрь 21, 2006 @ 8:52 pm | Цитировать

  3. 3  Плюс Минус  0

    Ага, и ещё
    взятый отсюда:
    http://www.hedgerwow.com/360/d.....nu_hack.js

    А пример здесь:
    http://www.hedgerwow.com/360/d.....k/demo.php

    Комментарий by m_vitaly — Декабрь 28, 2006 @ 5:45 pm | Цитировать

  4. 4  Плюс Минус  0

    m_vitaly

    Такой длинный скрипт ради одного селекта.. :)

    Комментарий by neutrino — Декабрь 28, 2006 @ 6:27 pm | Цитировать

  5. 5  Плюс Минус  0

    Что-то у меня не запалило, мот подскажете что не так? Класс в отдельном файле, жаваскрипт тоже на месте. Серверная обработка - ASP.NET 2.0

    Комментарий by mikachi — Январь 9, 2008 @ 5:05 pm | Цитировать

Оставить комментарий

XHTML (Разрешенные теги): <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .

Если вы хотите вставить в комментарий код, то жмите на кнопку "HTML" в редакторе и используйте теги <pre><code> и </pre></code> для вставки.

Не забывайте о том, что теги, вставленые без использования &lt;/&gt; будут автоматически трансформироваться.

Цитировать отмеченый текст