55

問題：

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

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

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

現在のUIでは、このドロップダウンを145ピクセルに合わせて、より長い説明のあるアイテムをホストする必要があります。

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

これがselect入力コードです（現時点では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>
4

23 に答える 23

30

IE 8には、単純な純粋なcssベースのソリューションがあります。

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

（選択ボックスが固定幅のコンテナの子である場合は、positionプロパティを設定する必要があります。）

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

于 2010-12-22T15:31:15.417 に答える
10

この問題について 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"));

           });
        }
      });
    }
    }
于 2010-12-30T11:28:09.410 に答える
7

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

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

これにより、<select> の幅に関係なく、<option> の上にカーソルを置くと、ツールチップのようにカットオフ テキストが表示されます。

IE7+ で動作します。

于 2011-02-10T12:28:52.047 に答える
7

これがあなたを助ける小さなスクリプトです：

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

于 2009-03-25T18:10:01.580 に答える
3

単にあなたはjqueryのためにこのプラグインを使うことができます;）

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

$(function(){
          $('.select1').skinner({'width':'200px'});
});
于 2011-10-06T14:14:51.043 に答える
3

申し訳ありませんが、javascript フリーではありませんが、jQuery を使用してかなり小さくすることができました

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

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

});

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

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

});
于 2009-07-17T13:01:25.193 に答える
2

MainMa と user558204 からのコードへの小さな、しかしうまくいけば有用な更新 (ありがとう)。これにより、不要な各ループが削除され、複数回使用されるため、各イベント ハンドラーの変数に $(this) のコピーが格納されます。同じアクションがあったため、イベントをぼかして変更します。

はい、ドロップダウン オプションだけでなく、選択要素のサイズを変更するため、まだ完全ではありません。しかし、これで窮地を脱することができました。私は (非常に残念ながら) ビジネス全体で 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"));
      });
  }
}
于 2012-05-01T23:46:29.980 に答える
1

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

于 2011-02-21T03:41:41.210 に答える
1 
for (i=1;i<=5;i++){
   idname = "Usert" + i;
   document.getElementById(idname).style.width = "100%";

}

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

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

于 2011-05-04T01:54:03.367 に答える
1

別のアプローチ：

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

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

于 2010-09-30T17:06:45.930 に答える
1

これに対するかなり簡単な修正を見つけました。html 要素に次のプロパティを追加し<select>ます。

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

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

于 2010-05-14T05:50:53.310 に答える
1

ドロップダウンリストにマウスオーバーイベントが必要なのはなぜですか? ドロップダウン リストが機能するように 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」バインディングのドロップダウン リストの最小幅プロパティに設定できます。

    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;
}
于 2012-09-20T20:00:34.687 に答える
1

本格的な jQuery プラグインが利用可能です。デモ ページをチェックしてください: http://powerkiki.github.com/ie_expand_select_width/

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

于 2012-08-20T11:41:47.020 に答える
0

これが実際に機能するソリューションです。

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

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

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

//////////////////////////
// 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();
});
于 2012-07-19T19:30:44.993 に答える
0

これをページに動的に追加した選択で機能させたかったので、多くの実験の結果、クラス「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
  • mouseleavejQueryのドキュメントに「 」の代わりに「」を使用するように記載されているにもかかわらず、blurIE7でマウスをドロップダウンリストの下に移動すると、mouseleaveイベントは取得されますが、は取得されないことがわかりましたblur。
于 2012-09-08T19:57:31.587 に答える
0

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>
于 2012-05-08T11:51:17.143 に答える
0

純粋な 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>

于 2015-08-07T08:05:31.950 に答える
0

jquery BalusC のソリューションは、私によって改善されました。また使用: Brad Robertson のコメントはこちら.

これを .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');
    })
    }
}
于 2011-09-05T19:33:09.227 に答える
0

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

私のブログ投稿では、他のソリューションについても説明しています。そのうちの 1 つは、stackoverflow で参照されています。独自の SELECT 要素を作成することに戻ったのは、単純な理由によるものです。マウスオーバーの展開イベントが好きではありません。多分それが他の誰かにも役立つなら！

于 2010-07-02T11:59:26.233 に答える
0

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

<!-- 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>
于 2015-06-26T02:54:34.137 に答える
0

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

非表示の select 要素に裏打ちされたスタイル可能な順序なしリストを作成する jquery プラグインです。

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

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

于 2012-06-26T16:12:53.717 に答える
0

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

私はこれがまさにそのようなものであることがわかりました:-

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

于 2015-01-10T04:14:10.480 に答える