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

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

изменить

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

Удачи.

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

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

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

<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>

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

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

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

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

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

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

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

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

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

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

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

Как вы заполняете 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.