IEでは、ドロップダウンリストの幅はドロップボックスと同じです（私が理解していると思います）。Firefoxでは、ドロップダウンリストの幅はコンテンツによって異なります。
これは基本的に、可能な限り長い選択範囲を表示できるようにドロップボックスの幅が十分にあることを確認する必要があることを意味します。これは私のページをとても醜く見せます:(
この問題の回避策はありますか？CSSを使用してドロップボックスとドロップダウンリストに異なる幅を設定するにはどうすればよいですか？
IEでは、ドロップダウンリストの幅はドロップボックスと同じです（私が理解していると思います）。Firefoxでは、ドロップダウンリストの幅はコンテンツによって異なります。
これは基本的に、可能な限り長い選択範囲を表示できるようにドロップボックスの幅が十分にあることを確認する必要があることを意味します。これは私のページをとても醜く見せます:(
この問題の回避策はありますか？CSSを使用してドロップボックスとドロップダウンリストに異なる幅を設定するにはどうすればよいですか？
回答:
次に、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の例です。お役に立てれば。
width: auto !important;
独自のドロップダウンリストを作成することは、それだけの価値があるというよりも骨の折れる作業です。JavaScriptを使用して、IEドロップダウンを機能させることができます。
YUIライブラリの一部とIE選択ボックスを修正するための特別な拡張機能を使用します。
以下を含め、<select>要素をaでラップする必要があります<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に問題があります（オプションでのマウスオーバーは、選択でのマウスオーバーとは見なされません）。これにより、マウスアウトの使用が非常に難しくなります。最初の解決策は、これまでに見つけた中で最高のものです。
次のことを試してみてください...
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=''"私が試したところ、うまくいきました。他には何も必要ありません。
私は次のソリューションを使用しましたが、ほとんどの状況でうまくいくようです。
<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が必要です。
@Thadあなたはぼかしイベントハンドラも追加する必要があります
$(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とIE7では完全に動作します）
IE6 / IE7 / IE8ではそれを行う方法はありません。コントロールはアプリによって描画され、IEはそのように描画しません。ドロップダウンを1つの幅にしてリストを別の幅にすることが重要な場合は、単純なHTML / CSS / JavaScriptを介して独自のドロップダウンを実装するのが最善の策です。
jQueryを使用する場合は、このIEの幅の選択プラグインを試してください。
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
このプラグインを適用すると、固定幅の外観とスタイルを失うことなくオプション要素を全幅で開くことができるため、Internet Explorerの選択ボックスがFirefox、Operaなどで機能するように動作します。また、Internet Explorer 6および7の選択ボックスのパディングとボーダーのサポートも追加します。
これが最も簡単な解決策です。
始める前に、ドロップダウン選択ボックスがIE6を除くほとんどすべてのブラウザーで自動的に展開されることを伝えなければなりません。したがって、私はブラウザチェック（つまりIE6）を行い、そのブラウザにのみ以下を書き込みます。いきます まず、ブラウザを確認します。
このコードは、ドロップダウン選択ボックスを魔法のように拡張します。ソリューションの唯一の問題は、ドロップダウンが420pxに拡大されることです。overflow= hiddenなので、拡大されたドロップダウンサイズを非表示にし、170pxとして表示します。そのため、ddlの右側の矢印は非表示になり、表示されません。ただし、選択ボックスは420pxに拡張されます。これが私たちが本当に望んでいることです。以下のコードを自分で試してみて、必要に応じて使用してください。
.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.--%>
}これをチェックしてください。完璧ではありませんが、動作し、IE専用であり、FFには影響しません。onmousedownの通常のjavascriptを使用してIEのみの修正を確立しました。ただし、jqueryからのmsieはonmousedownでも使用できます。主なアイデアは「オンチェンジ」であり、選択ボックスを通常に戻すためのぼかしです。あなたはそれらの幅を自分で決めましょう。35％必要でした。
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"上記のBalusCの答えはうまくいきますが、ドロップダウンのコンテンツの幅がCSSのselect.expandで定義した幅よりも小さい場合に追加する小さな修正があります。これをマウスオーバーバインドに追加します。
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})これは私が他の人のものからビットを取って行ったことです。
$(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は、選択テキストの幅よりも広いオプションテキストを持つドロップダウンです。
ご覧のとおり、IEでのみ機能するため、document.allを指定しています。また、lは次のように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>これにより、ドロップダウンが展開したときに他の要素が適切な位置に移動しなくなります。ここでの唯一の欠点は、選択するとメニューリストのビジュアルが消え、選択するとすぐに戻ることです。
これが誰かを助けることを願っています。
これはこれを行うための最良の方法です。
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}BalusCソリューションとまったく同じです。これだけが簡単です。;）
本格的なjQueryプラグインが利用可能です。それは非破壊的なレイアウトとキーボード操作をサポートします、デモページをチェックしてください：http : //powerkiki.github.com/ie_expand_select_width/
免責事項：私はそのことをコーディングしました、パッチは歓迎します
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');
})
}
}これまでのところありません。IE8については知らないが、JavaScriptを使用して独自のドロップダウンリスト機能を実装しない限り、IE6およびIE7では実行できません。Web上でそれを行う方法の例はいくつかありますが、既存の機能を複製することにはあまりメリットがありません。
同じことがasp：dropdownlistにもあります。
Firefox（3.0.5）では、ドロップダウンはドロップダウンで最も長いアイテムの幅であり、幅は600ピクセルなどです。
これはIE6で動作するようで、他のものを壊すようには見えません。もう1つの優れた点は、ドロップダウンの選択を変更するとすぐにメニューが自動的に変更されることです。
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});最初のベストアンサーのhedgerwowリンク（YUIアニメーションの回避策）が壊れています。ドメインが期限切れになったと思います。有効期限が切れる前にコードをコピーしたので、ここで見つけることができます（コードの所有者は、もう一度アップロードして著作権を侵害しているかどうかをお知らせします）。
同じブログ記事で、YUIボタンメニューを使用して、通常の要素とまったく同じSELECT要素を作成することについて書きました。見て、これが役立つかどうか私に知らせてください！
帽子をリングに投げると思った。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インデックス付きのdiv内に選択をスローすることでした。
<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>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>私はこの問題を回避する必要があり、IE6、7、および8（および他のブラウザーとの互換性）で動作するかなり完全でスケーラブルなソリューションを思いついたことがあります。私はそれについてここに記事全体を書きました：http : //www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
上記の解決策はいずれも（私の意見では）うまくいかないので、私はまだこの問題に遭遇している人々のためにこれを共有すると思います。
私はこれらのソリューションをすべて試しましたが、どれも完全に機能しませんでした。これは私が思いついたものです
$(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の各ドロップダウンにドロップダウンクラスを追加してください
ここでのトリックは（私はここでそれを発見した専門のクリック機能を使用している火災イベントにDropDownListの項目がjQueryを使って選択されるたびに）。ここでの他のソリューションの多くは、イベントハンドラーの変更を使用します。これはうまく機能しますが、ユーザーが以前に選択されたものと同じオプションを選択した場合はトリガーされません。
他の多くのソリューションと同様に、フォーカスとマウスダウンは、ユーザーがドロップダウンにフォーカスを置いたときのもので、ぼかしはクリックしたときのものです。
また、ある種のブラウザ検出をこれに固定したい場合もあります。他のブラウザでは見た目は悪くありません