Как получить поле <select> для переполнения из содержащего <div>?

Клиент попросил меня предоставить им несколько выпадающих списков. Поэтому я дал им некоторые, заполненные множеством различных вариантов.

Им понравилось, как выпадающие списки выглядели в Firefox и Chrome, потому что выпадающее меню автоматически расширяется до ширины текста, как показано:

Internet Explorer - готик-подросток мира веб-разработки и любит вести себя по-другому, поэтому он не видит своих сверстников как конформист. Он не видит значения в раскрывающемся списке, чтобы пользователь мог прочитать весь текст, который он содержит. Итак, это выглядит так:

Это было недостаточно для клиента, поэтому они попросили меня исправить это. Я нашел плагин jQuery, который изменил бы размер текстового поля, когда вы его сфокусировали, чтобы при его открытии вы могли видеть весь текст в нем. Пример доступен здесь: (обязательно загрузите это в IE8 или меньше)

Обратите внимание, что, когда вы нажимаете на раскрывающееся меню All companies, это приводит к выходу на следующую строку? Есть ли какой-либо способ заставить его оставаться на одной строке и "переполнять" * из содержащего div?

* не уверен, что это правильный термин, в этом контексте.

Ответы

Ответ 1

Это потому, что плагин изменяет размер <select>, чтобы соответствовать самому длинному <option> внутри него. К сожалению, единственная работа вокруг этого будет заключаться в position:absolute выборе внутри него родительского (установите на position:relative).

Действительно, это произойдет с любым из тех выпадающих списков, у которых контент больше, чем он может содержать. Это печально, но вы не можете управлять поведением <select>, если вы не имитируете выбор с помощью <div>, что и делает множество фреймворков JS UI, таких как Dojo.

Ответ 2

Вы можете поместить каждую строку из трех выборок в div и добавить класс к этим двум divs следующим образом:

.line{
 height: 40px; 
 width: 800px;  
  }


  <div class='line'>
  <select>...</select> <select>...</select>  <select>...</select>   
  </div>  
  <div class='line'>
  <select>...</select> <select>...</select>  <select>...</select>   
  </div>

Ответ 3

Предлагаемый пользовательский элемент select controll привяжет длинную строку опций к размеру: jquery-keyselect