Побеждаем обрезанный текст в HTML select

[remal]

Я правильно понимаю, что расширяться будут не только элементы списка, но и сам контрол на странице?

Можно пример увидеть?

[AlexSuslin]

Да, будет расширяться именно контрол, в этом была и суть бага — выпадающий список options обрезался по ширине контрола.

С примером сложнее, так как негде выложить, использовал этот метод на одном из внутренних проектов.

[remal]

А если у меня все контролы специально подогнаны по ширине, чтобы в таблицу помещались, тогда что делать? Верстка разъезжаться будет.

[AlexSuslin]

Все зависит от верстки, если справа от контролов достаточно места для самого длинного value в option, то все будет отлично. Но тут я согласен, решение не универсальное. Можно попробовать динамически изменять «position» на событии mouseover и возвращать в исходное состояние после того как фокус потерян.

[webdew]

Тогда смысл оставлять место справа под контрол, чтобы он потом туда расширился?
Если бы у меня было место, я бы сразу сделал пошире селект и не парился с вашими скриптами.

[AlexSuslin]

Не скажите, смотрите на скриншот в статье, там у всех контролов (textbox, textarea, select) фиксированная ширина, один длинный select будет выбиваться из общей картины, тогда пришлось бы делать широкими все контролы.

[DorBer]

Можно использовать position: absolute;

[remal]

Можно. Но смотреться все равно криво будет.

[DorBer]

Согласен. Понравился вариант с тайтлом чуть ниже.

[Auru]

Попробуйте копировать селект, хитро прятать часть копии, чтоб были видны только открытые options, но видны были полностью. А так расширенный селект может поломать верстку.

[AlexSuslin]

Спасибо, можно будет поиграться на досуге. Но, самое идеально решение, я думаю будет вместо обычного select использовать что-нибудь кастомное, например select на div'ах, но так как изначально везде на проекте использовался обычный селект, и как часто это происходит, нужен был срочный fix, получилось такое решение. Начало есть, можно развивать :)

[habracut]

Решил эту проблему простым копирование текста в атрибут title с помощью js.
Выглядит эстетично во всех браузерах:
Демка и скрин:

[AlexSuslin]

Зашел в FF на вашу демку — select разъехался до неимоверных размеров.

[habracut]

А Вы удачливый — зашли как раз в то время как я уронил статика на несколько минут. Попробуйте повторить попытку, Вам понравится.

[AlexSuslin]

Да, теперь все ок. Единственное, что надо пару секунд подержать наведенный курсор мыши, чтобы увидеть полный текст. Можно попробовать отлавливать события клика или выделения и показывать полный текст в отдельном baloon. Однако ваш вариант самый быстрый, если не надо видеть полный текст всех значений одновременно.

[stand_up]

В свою очередь существует еще отличная библиотека DHTML eXtensions, которая также умеет решать подобную проблему.
Может кто-то не знал о её существовании и возмет на заметку.

[AlexSuslin]

Спасибо за ссылку, не знал… Но здесь используется кастомный select на дивах. Но ссылку взял на заметку.