javascript - ドロップダウンリストの問題

Question

IE 6/7 のドロップダウンリストが次のように動作するという問題があります。

代替テキスト

widthドロップダウンリスト全体を展開しないとテキスト全体を表示するには、ドロップダウンの幅が十分でないことがわかります。

ただし、Firefox ではその通りなので問題ありませんexpands the width。これは、IE 6/7 で必要な動作です。

代替テキスト

問題を解決するためにを利用するさまざまな方法を検討しましたonfocus, onblur, onchange, keyboard and mouse eventsが、まだいくつかの問題があります。

ツールキット/フレームワーク (YUI、Ext-JS、jQuery など) を使用せずに IE 6/7 でこの問題を解決した人がいるかどうか疑問に思っていました。

score 4 · Accepted Answer

この男はあなたと同じ問題を抱えていて、彼は解決策を思いついた。これはちょっとしたハックであり、UIの設定方法によって異なりますが、オプションです。お役に立てば幸いです。

編集

私が探し始めたリンクは、実際にはこれでした。これは、ティムが提案したものと同じです。私の最初の発見よりも良い解決策だと思います。2番目の編集このソリューションは実際にはYUIフレームワークに依存していますが、その背後にある主要なアイデアを複製するのが難しすぎるとは思いません。それ以外の場合は、最初のリンクも問題なく、はるかに簡単です。

幸運を。

score 2 · Accepted Answer

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

多くの作業やフレームワークを使用しないと、あなたがやりたいことは不可能だと思います。上記は、試したりいじったりすることを検討するためのものです...

score 2 · Accepted Answer

このようなことはあなたの状況で実行可能でしょうか?

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

ドロップダウンの幅は、マウスオーバー中に拡大/縮小します。

score 0 · Accepted Answer

選択範囲を広くすることをお勧めします。Firefox はそれについて友好的であり、オプションの幅を広げてその値を確認できるようにしますが、オプションを選択すると、選択したものを正確に見ることができないという問題は解決しません。選択範囲を広くしない限り、ユーザー。したがって、使いやすさの観点から、ブラウザーがそのコンテンツに基づいて選択のサイズを変更できるようにするか、最も広いオプションのコンテンツの値に十分な幅を設定することをお勧めします。

score 0 · Accepted Answer

コントロールの幅を空白のままにしておくと、コントロール内のデータに合わせてサイズ変更されると思います。

[編集] はい、vs2005 Web アプリでテストしました。コントロールを追加し、アイテムを入れました。つまり、7.0 で最も長いアイテムに調整されました。幅を規定すると、これは行われなくなりました。

[編集 2] 唯一の問題は、ドロップダウンのテキストボックスも調整されることです。これにより、UI が失われる可能性があります。したがって、これはあなたが探している解決策ではないかもしれません。

[編集 3] それは間違いなくレンダリング方法が異なります。これを克服できる唯一の方法は、ここで提案されたものと同様の独自のコントロールを作成することだと思います

score 0 · Accepted Answer

問題は、自動的にサイズを変更したくないということです。問題をこの特定の問題に切り分けましょう。ユーザビリティの観点からは理想的ではないことに同意しますが、それでもこの問題を解決したいと考えています。

固定幅のドロップダウンリストがあり、上に表示されているように FireFox 7 のように動作させたいと考えています。

score 0 · Accepted Answer

これをIE7でテストしたところ、それに応じて拡張されました。IE 6/7 でのみそのサイズになるように強制する奇妙な CSS を使用していませんか? (「* html」などの奇妙な CSS セレクターハックを使用して、特定のブラウザーをターゲットにすることが可能です)

score 0 · Accepted Answer

基本的に、実際のテキストボックスが本当に必要な場合は、どちらかを選択する必要があります (幅を定義するか定義しないか)。これは、使用されているすべての既知のブラウザーのコーディングが困難であるという典型的な例であり、企業が集まって「これが今後のやり方です。永遠に」と言うまで、これを回避する方法はありません。

代わりに、別の返信で言及されているように、自家製のソリューションを使用することもできます。あなたの場合、私はそれをお勧めします。

score -2 · Accepted Answer

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 の幅を明示的に定義しないでください。

javascript - ドロップダウン リストの問題

9 に答える 9

Related

Reference

javascript - ドロップダウンリストの問題