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

StackOverflow https://stackoverflow.com/questions/212587

質問

IE＆＃8217; IE 6/7のドロップダウンリストがそのように動作するという問題があります：

alt text

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

ただし、Firefoxでは、それに応じて幅が拡張されるため、問題はありません。これがIE 6/7で必要な動作です：

alt text

onfocus、onblur、onchange、キーボード、およびマウスイベントを利用して、問題を解決しようとするさまざまな方法を検討しましたが、まだいくつかの問題があります。

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

役に立ちましたか？

解決

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

編集

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

がんばって。

他のヒント

このようなことはあなたの状況で実行可能ですか？

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のように動作するようにします。

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

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

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

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

IE7でこれをテストし、それに応じて拡張します。 IE 6/7でのみそのサイズになるように強制する何らかの奇妙なCSSを使用していないのですか？ （ '* html'などの奇妙なCSSセレクターハックを使用して特定のブラウザーをターゲットにすることが可能です）

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

別の方法として、別の返信に記載されているように、自社開発のソリューションを使用できます。あなたの場合、私はそれをお勧めします。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top