web-dev-qa-db-ja.com

IEでコンテンツを切り取る固定幅のドロップダウンを選択します

問題：

選択したアイテムの中には、完全に表示するために、145pxの指定された幅を超えるものが必要なものがあります。

Firefoxの動作：選択をクリックすると、最も長い要素の幅に調整されたドロップダウン要素リストが表示されます。

IE6およびIE7の動作：選択をクリックすると、145px幅に制限されたドロップダウン要素リストが表示され、長い要素を読み取ることができなくなります。

現在のUIでは、このドロップダウンを145pxに合わせて、より長い説明のあるホスト項目にする必要があります。

IEの問題を解決するためのアドバイスはありますか？

リストが展開されている場合でも、上部の要素の幅は145ピクセルのままである必要があります。

ありがとうございました！

CSS：

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

選択入力コードは次のとおりです（現時点ではbackend_dropboxスタイルの定義はありません）

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

ブラウザですばやくテストする場合の完全なhtmlページ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
htmlcssinternet-explorerhtml-select
55
aaandre

IE 8の場合、単純なCSSベースのソリューションがあります。

select:focus {
    width: auto;
    position: relative;
}

（selectboxが固定幅のコンテナの子である場合、positionプロパティを設定する必要があります。）

残念ながらIE 7以下は：focusセレクターをサポートしていません。

29
rusty

私はこの問題についてGoogleで調べましたが、最善の解決策は見つかりませんでした。そのため、すべてのブラウザーで正常に機能する解決策を作成しました。

ページの読み込み時にbadFixSelectBoxDataWidthIE（）関数を呼び出すだけです。

function badFixSelectBoxDataWidthIE(){
    if ($.browser.msie){
      $('select').each(function(){
    if($(this).attr('multiple')== false){
      $(this)
          .mousedown(function(){
               if($(this).css("width") != "auto") {
                   var width = $(this).width();
                   $(this).data("origWidth", $(this).css("width"))
                          .css("width", "auto");
                   /* if the width is now less than before then undo */
                   if($(this).width() < width) {
        $(this).unbind('mousedown');
                       $(this).css("width", $(this).data("origWidth"));
                   }
               }
           })
           /* Handle blur if the user does not change the value */
           .blur(function(){
               $(this).css("width", $(this).data("origWidth"));

           })
           /* Handle change of the user does change the value */
           .change(function(){
               $(this).css("width", $(this).data("origWidth"));

           });
        }
      });
    }
    }
10
Anoop Sharma

以下に、役立つスクリプトを示します。

http://www.icant.co.uk/forreview/tamingselect/

7
Zac

JavaScriptを使用しないシンプルなソリューションの場合、要件に応じて、テキストを保持している<option>にタイトル属性を追加するだけで十分な場合があります。

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

これにより、<select>の幅に関係なく、<option>にカーソルを合わせるとツールチップ形式でカットオフテキストが表示されます。

IE7 +で動作します。

7
islander

JavaScriptは無料ではありませんが、jQueryを使用してかなり小さくすることができました

$('#del_select').mouseenter(function () {

    $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

    $(this).css("width","170px");

});
3
stukerr

このプラグインをjqueryに使用するだけです;）

http://plugins.jquery.com/project/skinner

$(function(){
          $('.select1').skinner({'width':'200px'});
});
3
anbi

MainMaおよびuser558204からのコードに対する小さな、しかしうまくいけば便利な更新（みんなに感謝）は、不要な各ループを削除し、$（this）のコピーを各イベントハンドラーの変数に保存します。同じアクションがあったため、イベントをぼかして変更します。

はい、ドロップダウンオプションだけでなく、select要素のサイズを変更するため、まだ完全ではありません。しかし、ちょっと、ピクルスから抜け出したので、私は（非常に、非常に残念なことに）ビジネス全体でIE6が支配的なユーザーベースをサポートする必要があります。

// IE test from from: https://Gist.github.com/527683
var ie = (function () {
  var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
  );
  return v > 4 ? v : undef;
} ());


function badFixSelectBoxDataWidthIE() {
  if (ie < 9) {
    $('select').not('[multiple]')
      .mousedown(function() {
        var t = $(this);
        if (t.css("width") != "auto") {
          var width = t.width();
          t.data("ow", t.css("width")).css("width", "auto");

          // If the width is now less than before then undo
          if (t.width() < width) {
            t.unbind('mousedown');
            t.css("width", t.data("ow"));
          }
        }
      })

      //blur or change if the user does change the value
      .bind('blur change', function() {
        var t = $(this);
        t.css("width", t.data("ow"));
      });
  }
}
2
TechSpud

なぜドロップダウンリストにマウスオーバーイベントが必要なのでしょうか？以下は、ドロップダウンリストの動作方法についてIE8を操作する方法です。

まず、IE8で関数を渡すだけであることを確認しましょう。

    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
       //fix me code
    }

次に、選択がコンテンツ領域の外側に展開できるようにするために、まだない場合はドロップダウンリストをdivの正しい構造でラップして、ヘルパー関数を呼び出します。

        var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
        $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');

        //helper function for fix
        ddlFix();
    }

さて、イベントへ。 IE8は何らかの理由でフォーカスを合わせた後にイベントをスローするため、IEは展開しようとするとレンダリング後にウィジェットを閉じます。回避策は'focusin'にバインドすることです=および'focusout'最長のオプションテキストに基づいて自動拡張するクラス。その後、デフォルト値を超えて縮小しない一定の最小幅を確保するために、現在の選択を取得できます。リストの幅、および'onchange'バインディングのドロップダウンリストのmin-widthプロパティに設定します。

    function ddlFix() {
    var minWidth;

    $('select')

    .each(function () {
        minWidth = $(this).width();
        $(this).css('min-width', minWidth);
    })
    .bind('focusin', function () {
        $(this).addClass('expand');
    })
    .change(function () {
        $(this).css('width', minWidth);
    })
    .bind('focusout', function () {
        $(this).removeClass('expand');
    });
}

最後に、スタイルシートにこのクラスを必ず追加してください。

 select:focus, select.expand {
    width: auto;
}
1
Ben Sewards

完全なjQueryプラグインが利用可能です。デモページをご覧ください： http://powerkiki.github.com/ie_expand_select_width/

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

1
PowerKiKi
for (i=1;i<=5;i++){
   idname = "Usert" + i;
   document.getElementById(idname).style.width = "100%";

}

この方法を使用して、幅が正しく表示されないときにドロップダウンリストを表示しました。

IE6、Firefox、Chromeで動作します。

1
keong

同様の解決策は、jqueryを使用してフォーカス（またはmouseenter）時の自動幅を設定し、ぼかし（またはmouseleave）時の元の幅を設定することで見つけることができます http://css-tricks.com/select-cuts-off -options-in-ie-fix / 。

1
schrodinger's code

別のアプローチ：

  1. 選択の代わりに編集ボックスを作成し、無効にして、誰も手動で入力したり、選択後に内容を変更できないようにします
  2. 選択したオプションのIDを含む別の非表示の編集（以下で説明）
  3. ボタン[..]を作成し、スクリプトを作成して、そのdivを下に表示します
  4. 編集ボックスの下または近くに絶対位置を持つ非表示のdivを作成します
  5. そのdivに、style size = "6"（ドロップダウンリストではなく6つのオプションとスクロールバーを表示する）の選択と、ボタン "select"および多分 "cancel"を含めるようにします。
  6. 幅にスタイルを設定しないでください。幅全体を選択すると、最も幅の広いオプションの幅またはボタンに加えて、選択したパディングが追加されます。
  7. 「選択」ボタンのスクリプトを使用して、選択したオプションのIDを非表示の編集ボックスにコピーし、その値を表示されている編集ボックスにコピーします。また、divを再度非表示にします。

合計4つの単純なJavaScriptコマンド。

1
Kitet

このための非常に簡単な修正が見つかりました。の中に <select> html要素はこれらのプロパティを追加します：

onmouseover="autoWidth(this)" 
onblur="resetWidth(this)"

そのため、ユーザーがクリックすると幅が自動的に拡大し、ユーザーが選択ボックスから移動すると、幅は元にリセットされます。

1
TheOnlyOne

私のレイアウトでは、ハックを望んでいませんでした（幅は拡大せず、自動でクリックしてから元に戻りません）。それは私の既存のレイアウトを壊しました。他のブラウザと同じように正常に動作するようにしたかっただけです。

私はこれがまさにそのようであることがわかった：-

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html

0
Steve

これにはさらに別の貢献があります。あなたが役に立つと思うかもしれないとしばらく前に書きました： http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

これは、非表示のselect要素によって裏付けられたスタイル設定可能な順序なしリストを作成するjqueryプラグインです。

ソースはgithubにあります： https://github.com/tncbbthositg/GiantDropdown

SELECTではできないULの動作とスタイルを処理できます。選択リストはまだ存在しているため、他のすべては同じである必要があります。これは非表示になっていますが、ULはそれをバッキングデータストアとして使用します（使用する場合）。

0
D. Patrick

オプションが選択された後（つまり、選択して新しいページにジャンプする）、奇妙なビューを気にしない場合の回避策：

<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
  <select onchange='jump();'>
    <!-- '&#9660;(▼)' produces a fake dropdown indicator -->
    <option value=''>Jump to ... &#9660;</option>
    <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
    ...
  </select>
</div>
0
Mergen Wu

実際に機能するソリューションを次に示します。

IEで幅を設定し、ページレイアウトを混乱させず、このページの他のソリューションのように選択オプションの上にマウスを置いてもドロップダウンを閉じません。

ただし、選択フィールドの設定と一致するように_margin-right_値と幅の値を変更する必要があります。

また、$('select')を$('#Your_Select_ID_HERE')に置き換えて、特定の選択フィールドのみに影響を与えることができます。同様に、本体onloadで関数fixIESelect()を呼び出すか、以下のコードで行ったようにDOM readyを使用してjQuery経由で呼び出す必要があります。

_//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
{
 if ($.browser.msie)
 {
  $('select').mouseenter(function ()
  {
   $(this).css("width","auto");
   $(this).css("margin-right","-100");
  });
  $('select').bind('click focus',function ()
  {
   window.fixIESelect_clickset = true;
  });
  $('select').mouseout(function ()
  {
   if(window.fixIESelect_clickset != true)
   {
    $(this).css("width","93px");
    window.fixIESelect_clickset = false;
   }
  });
  $('select').bind('blur change',function ()
  {
   $(this).css("width","93px");
  });
 }
}
/////////////
// ONLOAD //
////////////
$(document).ready(function()
{
 fixIESelect();
});
_
0
Gallagher

純粋なCSSソリューション： http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }
<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>
0
Teenage

私はこれをページに動的に追加した選択で動作するようにしたかったので、多くの実験の後、クラス「fixedwidth」でこれを行いたいすべての選択を与え、次のCSSを追加しました：

_table#System_table select.fixedwidth { width: 10em; }
table#System_table select.fixedwidth.clicked { width: auto; }
_

そしてこのコード

_<!--[if lt IE 9]>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(document).on(
              {
                'mouseenter': function(event) {
                    jQuery(this).addClass('clicked');
                    },
                'focusout change blur': function() {
                    jQuery(this).removeClass('clicked');
                    }
              }, 'select.fixedwidth');
        });
    </script>
<![endif]-->
_

注意点がいくつかあります。

  • 私の選択はすべてテーブルにあるという事実にもかかわらず、私はjQuery(document).onの代わりにjQuery('table#System_table').onに対して "on"をしなければなりませんでした
  • JQueryのドキュメントには「mouseleave」ではなく「blur」を使用するように記載されているにもかかわらず、IE7では、ドロップダウンリストでマウスを下に移動すると、 mouseleaveイベントではなく、blurではありません。
0
Paul Tomblin

Jquery BalusC's ソリューションは私によって改善されました。使用：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');
    })
    }
}
0
Federico Valido

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 code

    <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

Javascriptは無料ではありません、私も恐れており、私のソリューションにはjsライブラリが必要ですが、すべてを使用するのではなく、必要なファイルのみを使用できます。すでにプロジェクトにYUIを使用している人や、使用するもの。ご覧ください： http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

私のブログ投稿では、他のソリューションについても説明しています。stackoverflowで参照されています。私が独自のSELECT要素を作成した理由は、単純な理由で、マウスオーバーエキスパンドイベントが嫌いです。たぶんそれが他の誰かにも役立つなら！

0
Hammad Tariq