web-dev-qa-db-ja.com

ドロップダウンリストの幅IE

IEでは、ドロップダウンリストの幅はドロップボックスと同じ幅になります（理にかなっていると思います）が、Firefoxではドロップダウンリストの幅はコンテンツによって異なります。

これは基本的に、可能な限り長い選択範囲を表示するのに十分な幅のドロップボックスを用意する必要があることを意味します。これにより、私のページは非常に見苦しくなります:(

この問題の回避策はありますか？ CSSを使用して、DropboxとDropdownlistに異なる幅を設定するにはどうすればよいですか？

javascripthtmlinternet-explorerdrop-down-menu
92
Nimesh Madhavan

もう1つ jQuery ベースの例があります。ここに投稿された他のすべての回答とは異なり、すべてのキーボードイベントとマウスイベント、特にクリックが考慮されます。

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

このCSSの一部と組み合わせて使用​​します。

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

必要なことは、クラスwideを問題のドロップダウン要素に追加することだけです。

<select class="wide">
    ...
</select>

これはjsfiddleの例です 。お役に立てれば。

102
BalusC

独自のドロップダウンリストを作成することは、それが価値がある以上に苦痛です。 JavaScriptを使用してIEドロップダウンを機能させることができます。

これは、YUIライブラリーの一部と、IE selectボックスを修正するための特別な拡張機能を使用します。

以下を含め、<select>要素を<span class="select-box">にラップする必要があります

これらをページのbodyタグの前に置きます。

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

承認後編集：

YUIライブラリとHackコントロールなしでこれを行うこともできます。本当に必要なのは、select要素にonmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'"（または必要なもの）を置くことだけです。 YUIコントロールはそのニースアニメーションを提供しますが、必須ではありません。このタスクは、jqueryおよび他のライブラリでも実行できます（ただし、これに関する明示的なドキュメントは見つかりませんでした）

-編集の修正：
IEには、選択コントロールのonmouseoutに問題があります（オプションでのマウスオーバーは選択でのマウスオーバーとは見なされません）。これにより、マウスアウトの使用が非常に難しくなります。最初の解決策は、私がこれまでに見つけた最高のものです。

14
Sleep Deprivation Ninja

あなたはちょうど次を試すことができます...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

試しましたが、うまくいきました。他に何も必要ありません。

12
Sai

私は次のソリューションを使用しましたが、ほとんどの状況でうまくいくようです。

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

注：$。browser.msieにはjqueryが必要です。

9
Justin Fisher

@Thadには、blurイベントハンドラーも追加する必要があります

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

ただし、これにより、要素だけではなく、クリック時に選択ボックスが拡張されます。 （そしてIE6では失敗するようですが、Chrome and IE7）では完全に動作します）

7
Tinus

JQueryを使用する場合は、これを試してくださいIE select widthプラグイン：

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

このプラグインを適用すると、Internet Explorerの選択ボックスがFirefoxで動作するように見えるようになります。Operaなど。また、Internet Explorer 6および7の選択ボックスにパディングと境界線のサポートを追加します。

5
Ewen

IE6/IE7/IE8でそれを行う方法はありません。コントロールはアプリによって描画され、IEは単にそのように描画しません。ドロップダウンの幅を1つ、リストの幅を別の幅にします。

5
Robert C. Barth

JQueryでは、これはかなりうまく機能します。ドロップダウンにid = "dropdown"があると仮定します。

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
4
Thad

これが最も簡単な解決策です。

始める前に、IE6を除くほとんどすべてのブラウザーでドロップダウン選択ボックスが自動的に展開することを伝える必要があります。そのため、ブラウザチェック（IE6など）を実行し、そのブラウザにのみ次のものを書き込みます。ここに行きます。最初にブラウザを確認します。

コードは、ドロップダウン選択ボックスを魔法のように拡張します。ソリューションの唯一の問題は、ドロップダウンが420pxに拡張されることです。オーバーフロー= hiddenであるため、拡張されたドロップダウンサイズを非表示にし、170pxとして表示します。そのため、ddlの右側の矢印は非表示になり、表示されなくなります。ただし、選択ボックスは420ピクセルに拡張されます。これが本当に欲しいものです。以下のコードを試してみて、気に入ったらそれを使用してください。

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

上記はIE6 CSSです。他のすべてのブラウザに共通のCSSは次のようになります。

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
3
bluwater2001

これをチェックしてください。完璧ではありませんが、動作します。IEのみで、FFには影響しません。onmousedownの通常のJavaScriptを使用してIE =修正のみ。ただし、jqueryのmsieはonmousedownでも使用できます。主なアイデアは、選択ボックスを通常に戻すための「onchange」およびぼかしです...自分の幅を決める。35％が必要でした。

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
2
lucien

遷移効果のないシンプルなドロップダウンメニューやフライアウトメニューが必要な場合は、CSSを使用するだけです。..で定義されている動作（IE6のみのプロパティ）で.htcファイル（css3hover？）条件付きで添付されたCSSファイル。

2
cam

上記のBalusCの答えはうまく機能しますが、ドロップダウンのコンテンツの幅がCSS select.expandで定義したものよりも小さい場合に追加する小さな修正があります。これをマウスオーバーバインドに追加します。

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
2
jbabey

これは、他の人のものからビットを取って行ったことです。

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

ここで、cboEthnicityとcboDisabilityは、選択自体の幅よりも広いオプションテキストを含むドロップダウンです。

ご覧のとおり、document.allを指定したのはIEでのみ機能するためです。また、次のようにdiv要素内にドロップダウンを入れました。

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

これにより、ドロップダウンが展開されたときに他の要素が所定の位置から移動するようになります。ここでの唯一の欠点は、メニューリストのビジュアルが選択中に消えるが、選択するとすぐに戻ることです。

これが誰かを助けることを願っています。

2
Derrick

これはこれを行う最良の方法です。

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

balusCソリューションとまったく同じです。これだけが簡単です。 ;）

2
mcmwhfy

完全なjQueryプラグインが利用可能です。ノンブレークレイアウトとキーボードインタラクションをサポートしています。デモページをご覧ください。 http://powerkiki.github.com/ie_expand_select_width/

免責事項：私はそのことをコーディングしました、パッチは歓迎します

2
PowerKiKi

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

1
Ybbest

Jquery BalusCのソリューションは私によって改善されました。使用：Brad Robertson's comment here 。

これを.jsに入れて、目的のコンボにワイドクラスを使用し、IDを与えるために偽造しないでください。 onload（またはdocumentReadyなど）で関数を呼び出します。
単純なロバのように:)
最小長としてコンボに定義した幅を使用します。

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
1
Federico Valido

これらのソリューションをすべて試しましたが、完全に機能するものはありませんでした。これは私が思いついたものです

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

必ずHTMLの各ドロップダウンにドロップダウンクラスを追加してください

ここでのコツは、専用のクリック機能を使用することです（ここで見つけました jQueryでDropDownListアイテムが選択されるたびに発生するイベント ）。ここにある他のソリューションの多くは、イベントハンドラーの変更を使用します。これは適切に機能しますが、ユーザーが以前に選択したものと同じオプションを選択した場合はトリガーされません。

他の多くのソリューションと同様に、フォーカスとマウスダウンは、ユーザーがドロップダウンにフォーカスを置いたときのものであり、ブラーはクリックして離れたときのものです。

また、これに何らかのブラウザの検出を固執して、それだけが影響するようにすることもできます。他のブラウザでは見た目は悪くありませんが

0
RasTheDestroyer

これはIE6で動作するようで、他のユーザーを破壊するようには見えません。もう1つの良い点は、ドロップダウンの選択を変更するとすぐにメニューが自動的に変更されることです。

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});
0
lhoess

Sai によって投稿されたソリューションに基づいて、これがjQueryを使用した方法です。

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});
0
Ahmad Alfy

Asp：dropdownlistにも同じことがあります。

Firefox（3.0.5）では、ドロップダウンはドロップダウン内の最も長いアイテムの幅で、幅600ピクセルなどです。

0
Harlequin

Select要素にスタイルを直接追加できます。

<select name="foo" style="width: 200px">

したがって、この選択項目は200ピクセルの幅になります。

または、クラスまたはidを要素に適用し、スタイルシートで参照できます

0
Katy

最初のベストアンサーの生け垣リンク（YUIアニメーションの回避策）が壊れています。ドメインの有効期限が切れたと思います。有効期限が切れる前にコードをコピーしたので、ここで見つけることができます（コードの所有者は、もう一度アップロードして著作権を侵害しているかどうかを知らせてくれます）

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

同じブログ投稿で、YUIボタンメニューを使用して、通常のSELECT要素とまったく同じSELECT要素を作成することについて書きました。見て、これが役立つかどうか教えてください！

0
Hammad Tariq

今のところありません。 IE8については知りませんが、JavaScriptを使用して独自のドロップダウンリスト機能を実装しない限り、IE6およびIE7ではできません。ウェブ上でそれを行う方法の例がありますが、既存の機能を複製することにはあまり利点がありません。

0
pilsetnieks

IE、Chrome、FF、Safariのすべてのバージョンでテスト済み

// JavaScriptコード

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// HTMLコード

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
0
Arif

私はこの問題を回避する必要があり、かつてIE6、7、8で動作する（そして明らかに他のブラウザーと互換性がある）非常に完全でスケーラブルなソリューションを思いつきました。私はそれについての記事全体をここに書いた： http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-Explorer

上記の解決策はすべての場合に機能しないため、この問題にまだ直面している人々のためにこれを共有すると思います（私の意見では）。

0
Aerendel

リングに帽子を投げると思った。 SaaSアプリケーションを作成し、テーブル内に選択メニューを埋め込みました。この方法は機能しましたが、テーブル内のすべてが歪んでいました。

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

だから、私がそれをすべて良くするためにしたことは、z-indexed divの中にselectを投げることでした。

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
0
n0nag0n