2013-08-09 2 views
2

У меня есть ограниченное пространство и элемент в выпадающем меню с большим количеством текста.Малый выпадающий список, большие данные

Возможно ли иметь выпадающую ширину маленькую, но всплывающее окно списка большое?

Edit: Я использую IE

+0

@SrikanthAD Возможно, у меня нет правильного термина. Когда пользователь нажимает на раскрывающийся список, появляется список элементов. Это всплывающее окно. –

ответ

1

Боюсь IE является cuplrit здесь. Другие браузеры предоставляют вам любую ширину, необходимую для вашего option s, и оставьте поле выбора размером, который вы определяете, но IE8 и ниже разрезают его до ширины родительского поля select.

Ответ лежит на JQuery и прекрасно документирован здесь: Dropdownlist width in IE

+0

Хороший улов, да, я использую IE. –

+0

Нет проблем, я предположил, что проблема была исправлена ​​чем-то подобным на 'select', над которым я работал, недавно протестировав в IE. –

3

Да, это возможно. И в текущих браузерах вам не нужно делать ничего особенного для разных размеров. Просто установите width вашего select, а option s все равно будут такими большими, какими они должны быть.

<select id="menu"> 
    <option>short</option> 
    <option>a quite long option that is wider than the select</option> 
    <option>another option</option> 
</select> 
#menu { 
    width: 100px; 
} 

jsFiddle

Это работает в Firefox, Chrome и IE10:

short select with long options popup in Firefox

short select with long options popup in Chrome

long options popup of select in IE10

Но IE9 не поддерживает это:

short select with short options popup in IE9

+0

Это имеет смысл, но, к сожалению, IE является бессмысленным и отсекает его по ширине окна выбора. Невозможно определить ширину '' '' '' '' '' ''. –

+0

@ScottBrown Возможно, я что-то пропустил, но я не слышал упоминания о том, что в вопросе. – zazvorniki

+0

@zazvorniki Достаточно честный, но я бы подумал, что OP хочет, чтобы это работало во всех браузерах. Они не столкнулись бы с проблемой, используя браузер Gecko или Webkit, поэтому предполагали, что они столкнулись с проблемой IE, которую я описал в своих комментариях и ответах. –

Смежные вопросы