Проблема с раскрывающимся списком

У меня проблема, когда раскрывающийся список в IE 6/7 ведет себя следующим образом:

Проблема с раскрывающимся списком

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

Однако в Firefox проблем нет, так как он expands the width соответственно. Это то поведение, которое мы хотим в IE 6/7:

Проблема с раскрывающимся списком

Мы рассмотрели различные способы использования onfocus, onblur, onchange, keyboard and mouse events, чтобы попытаться решить проблему, но все же остались некоторые проблемы.

Мне было интересно, решил ли кто-нибудь эту проблему в IE 6/7 без использования каких-либо инструментов / фреймворков (YUI, Ext-JS, jQuery и т. д.…).

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
4 295
9
Перейти к ответу Данный вопрос помечен как решенный

Ответы 9

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

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

Brian Liang 17.10.2008 19:37

Я думаю, что если вы оставите пустую ширину в элементе управления, она изменится в соответствии с данными в элементе управления.

[EDIT] Да, тестировал его в веб-приложении vs2005. Добавлен элемент управления и вставлены элементы. Он настроен на самый длинный элемент в версии 7.0. Когда я оговорил ширину, он больше не делал этого.

[РЕДАКТИРОВАТЬ 2] Единственная проблема заключается в том, что текстовое поле раскрывающегося списка также настраивается. Это может нарушить ваш пользовательский интерфейс. Так что это может быть не то решение, которое вы ищете.

[РЕДАКТИРОВАТЬ 3] Это определенно другой способ рендеринга. Я думаю, что единственный способ преодолеть это - создать свой собственный элемент управления, аналогичный тому, что предлагалось здесь

Как вы заполняете DropDownList. Я использую следующий код для заполнения DropDownList, и он регулирует ширину в соответствии с наибольшим отображаемым текстом:

private void BindData()
        {
            List<Foo> list = new List<Foo>();
            list.Add(new Foo("Hello"));
            list.Add(new Foo("bye bye"));
            list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));

            ddl1.DataSource = list;
            ddl1.DataTextField = "Text"; 
            ddl1.DataBind(); 
        }

Ах да, не определяйте явно ширину DropDownList.

Возможно ли что-то подобное в вашей ситуации?

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

Ширина раскрывающегося списка увеличивается / уменьшается при наведении курсора мыши.

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

У нас есть раскрывающийся список с фиксированной шириной, и мы хотим, чтобы он вел себя как в FireFox 7, как показано выше.

Я тестировал это на IE7, и он соответственно расширяется. Вы уверены, что не используете какой-то странный CSS, который заставляет его иметь такой размер только в IE 6/7? (Можно настроить таргетинг на определенные браузеры, используя странные хаки селектора CSS, такие как '* html')

Вы установили ширину на элементе управления? установите его на 100 и посмотрите, что произойдет. Я думаю, это то, к чему он пытается добраться.

osp70 17.10.2008 19:56

По сути, если вам действительно нужно ФАКТИЧЕСКОЕ текстовое поле, вам нужно будет выбрать одно или другое (определить или не определить ширину). Это классический пример трудностей кодирования для всех используемых браузеров, и на самом деле нет никакого способа обойти его, пока компании не соберутся вместе и не скажут: «Так оно и будет. НАВСЕГДА».

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

Ответ принят как подходящий

У Этот парень была та же проблема, что и у вас, и он придумал решение. Это немного похоже на взлом и зависит от того, как у вас настроен пользовательский интерфейс, но это вариант. Я надеюсь, что это помогает.

редактировать

Ссылка, которую я начал искать, на самом деле была Вот этот, что и предложил Тим. Думаю, это лучшее решение, чем моя первоначальная находка. 2-е изменение Это решение фактически зависит от фреймворка YUI, но я бы не подумал, что репликация основной идеи, стоящей за ним, будет слишком сложной. В остальном 1-я ссылка тоже подойдет, и намного проще.

Удачи.

Единственная проблема со второй ссылкой заключается в том, что я пробовал их пример, и он сильно зависит от YUI.

Brian Liang 17.10.2008 22:15

Без проблем. Причина, по которой я не могу использовать YUI или любой другой инструментарий / фреймворк, заключается в том, что это клиентский проект, который не позволяет этого.

Brian Liang 17.10.2008 22:36
<script type = "text/javascript">
    var MAX_WIDTH = 500; //the biggest width the select is allowed to be

    function biggestOption(elem) {
        var biggest = 0;
        for (var i=0;i<elem.options.length;i++) {
            if ( elem.options[i].innerHTML.length > biggest ) {
                biggest = elem.options[i].innerHTML.length;
            }
        }
        return roughPixelSize(biggest);
    }

    function roughPixelSize(charLength) {
        //this is far from perfect charLength to pixel
        //but it works for proof of concept
        roughSize =  30 + (charLength * 6);
        if (roughSize > MAX_WIDTH) {
            return MAX_WIDTH;
        } else {
            return roughSize;
        }
    }

    function resizeToBiggest(elem) {
        elem.style.width = biggestOption(elem);
    }

    function resizeToSelected(elem) {
        elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
    }

</script>

<select onmouseover = "resizeToBiggest(this)" style = "width:70px" onchange = "resizeToSelected(this)" onblur = "resizeToSelected(this)" >
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>this is some really really realy long text</option>
    <option>test 4</option>
    <option>test 5</option>
</select>

Я не думаю, что то, что вы хотите делать, возможно без большой работы или использования фреймворка. Выше есть кое-что, что вы можете попробовать / возиться с ...

Другие вопросы по теме