Рекомендации для выпадающих пунктов меню, которые являются слишком широкими?

Question

Какие варианты у меня есть, когда выпадающее меню сталкивается с текстом, который настолько широк, что расширение ширины меню для размещения невозможно? то есть он ломает макет страницы или выглядит слишком уродливо, если раскрывающийся список настроен для длинного элемента.

усечение? Усечение плюс полный текст при наведении? Не разрешать предметы так долго?

Кто-нибудь сталкивался с какими-нибудь изящными решениями?

Спасибо.

Answer 1

Я понимаю, что довольно поздно опоздал на этот вопрос, но я искал ответ и, возможно, нашел довольно элегантное решение.

Посмотрите здесь:

• http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
• http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

Первая ссылка говорит о паре решений, прежде чем рекомендовать решение на основе второй ссылки.

Идея состоит в том, что при нажатии вы изменяете ширину тега <select> так, чтобы он был достаточно большим, чтобы отобразить полный текст параметров. Сохраняя тег <select> внутри элемента div с переполнением, установленным на «скрытый», он не вредит остальной части страницы.

Попробуйте - это очень хорошее решение.

Answer 2

Усечение с всплывающей подсказкой было бы моим выбором ....

В прошлый раз, когда мне пришлось это сделать, я использовал Telerik Control, который был довольно богатым пользовательским интерфейсом.

Answer 3

Укажите максимальную ширину элемента с помощью свойства CSS max-width.

Answer 4

Я согласен с GordonB относительно усечения опций. Чрезмерно длинные варианты могут быть трудно читаемыми, и, как вы упомянули, это выглядит ужасно.

Однако, если ваш выпадающий список заполнен пользовательским вводом, я бы ограничил длину. То, что можно сказать с 15 словами, следует сказать с 5 ... если это невозможно, то, возможно, выпадающий список - не лучший вариант.

Например, если вашими вариантами являются названия исследовательских работ и их авторов, вы, вероятно, можете сократить их до нескольких ключевых слов («String Theory and You [Brown 2008]»). С другой стороны, если сами варианты отличаются только на несколько слов и теряют смысл, если они усечены (например, список вариантов, таких как «Бутерброд с арахисовым маслом и виноградным желе с морковными палочками и соевым молоком» и «Арахисовое масло и мальчишниковое желе») «с песком с морковными палочками и 2% молока»), возможно, вам будет лучше обслужить, последовательно отображая все опции, сопровождаемые флажком или переключателем в зависимости от ситуации.

(Если вы используете ASP.NET, в основном я говорю об использовании повторителя вместо DropDownList)

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

Answer 5

Большинство браузеров отображают параметры на полную ширину независимо от фактической ширины раскрывающегося списка, тогда как IE обрезает их до ширины поля выбора. Так что проблема действительно зависит от браузера.

Я принял решение, используя абсолютное позиционирование в раскрывающемся списке, чтобы я мог увеличить его ширину при наведении в IE, не нарушая компоновку. Немного бестолково, но это один из вариантов.

Answer 6

Почему бы не создать вычисляемое поле, основанное на длинном поле. Создавайте только первые 50 (скажем) символов.

= ЛЕВЫЙ ([Название], 50)

Затем укажите это поле в раскрывающемся списке.

Answer 7

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

Если выпадающий список очень узкий, а самые длинные предметы не очень длинные (например, 3-4 слова), измените дизайн, чтобы приспособить его.

Если текст действительно длинный (например, предложения), то обрежьте его, если можете. Иногда текст не поддается этому (например, вы можете получить несколько элементов с одинаковым текстом). Вы не можете добавить подсказки к выбранным элементам списка.

Если текст действительно длинный и не может быть обрезан, вы можете рассмотреть другой вариант пользовательского интерфейса.

Answer 8

Я использовал коммерческий элемент управления ASP.NET, который реализован с использованием

вместо