Выпадающее меню css для расширения ширины на основе содержимого

Я пытался создать выпадающее меню с динамическими значениями, в основном есть 5 текстовых полей и выпадающее меню, а выпадающее меню получает значения из этих текстовых полей. Если пользователь вводит какой-либо текст, который больше ширины раскрывающегося списка, он перекошен в IE. Я исправил это, выбрав select: hover {width: auto; position: absolute}. Теперь проблема заключается в том, что пользователь вводит значения, которые все меньше, чем исходный размер раскрывающегося списка, который он сжимает, я хочу, чтобы он не сокращался и все еще расширяется. Есть предположения??Выпадающее меню css для расширения ширины на основе содержимого

Я использую dojo и javascript, не могу использовать jquery.

источник

2013-03-08 RegisteredUser

Причина для downvote? Его просто затормозили, когда люди понизили что-то, что они не могут ответить – RegisteredUser

Не я, а, может быть, потому, что вы не опубликовали какой-либо код? – jackncoke

Я тоже не спустил вас вниз, но вопрос чрезвычайно удобен для Google; поэтому люди, вероятно, думают, что это ленивый вопрос. – patricksweeney

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

Это будет работать так, как вы хотите (ширина не сжимается), когда вы меняете текст снова, потому что JavaScript найдет максимальную ширину текста меньше, чем у dropodown, поэтому ширина не изменится.

источник

2013-03-08 20:33:19 SuckerForMayhem

Простое исправление будет заключаться в том, чтобы выбрать ширину для списка Dropdownlist и установить максимальную и минимальную длины в значения вашего текстового поля, чтобы вы могли контролировать размер ваших материалов. В противном случае я мог бы ввести что угодно.

источник

2013-03-08 20:44:01 jackncoke

Я вернусь к 0 на ваш вопрос и предоставил решение.

Использование CSS. В поле выбора установите ширину и даже если содержимое в ней меньше, оно не станет меньше.

<select style="min-width:200px;" id="someUniqueIdentifier"> 
    /* Your dynamicaly generated options*/ 
</select>

источник

2013-03-08 20:58:09 Chausser

Абсолютная ширина также предотвратит расширение элемента select, если текст опции больше ширины, которую вы определили. – pwdst

Действительная точка Я настроюсь на использование атрибута min-width atttribute – Chausser

Самое простое решение, если я прочитал вопрос правильно было бы использовать мин-ширина свойства (developer.mozilla.org/en-US/docs/CSS/min-width) как так - выберите {min-width: 50px; ширина: авто; } - Это позволит ширине элемента управления расширяться по мере необходимости, но не опускаться ниже минимальной ширины, которую вы определили. Это можно определить в селекторе состояния: hover, но будет работать так же хорошо (и я предлагаю) на самом элементе. Поддержка IE8 +, не требуется JavaScript.

источник

2013-03-17 23:08:55 pwdst

Выпадающее меню css для расширения ширины на основе содержимого

ответ

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