IEのドロップダウンリストの幅
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
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の例です. 。お役に立てれば。
他のヒント
独自のドロップダウン リストを作成するのは、価値があるというよりも面倒です。JavaScript を使用すると、IE ドロップダウンを機能させることができます。
これは、YUI ライブラリの一部と、IE 選択ボックスを修正するための特別な拡張機能を使用します。
以下を含めてラップする必要があります。 <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 に問題があります (オプション上のマウスオーバーが選択上のマウスオーバーであると認識されません)。このため、マウスアウトの使用が非常に難しくなります。最初の解決策は、私がこれまでに見つけた中で最良のものです。
次のことを試してみてください...
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が必要です。
@ブラーイベントハンドラーも追加する必要があります
$(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 は単純にそのように描画しません。ドロップダウンの幅とリストの幅を分けることが重要な場合は、単純な HTML/CSS/JavaScript を使用して独自のドロップダウンを実装するのが最善の策です。
jQuery を使用している場合は、この IE 選択幅プラグインを試してください。
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
このプラグインを適用すると、固定幅の外観やスタイルを失うことなくオプション要素を全幅で開くことができるため、Internet Explorer の選択ボックスが Firefox や Opera などで動作するように表示されます。また、Internet Explorer 6 および 7 の選択ボックスのパディングと境界線のサポートも追加されます。
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");
}
});
});
これが最も簡単な解決策です。
始める前に、ドロップダウン選択ボックスは IE6 を除くほとんどすべてのブラウザで自動的に展開されることをお伝えしなければなりません。そこで、ブラウザ (IE6) をチェックし、そのブラウザにのみ次のコードを書き込みます。さあ、行きます。まずはブラウザを確認してください。
このコードは、ドロップダウン選択ボックスを魔法のように展開します。この解決策の唯一の問題は、onmouseover でドロップダウンが 420 ピクセルに拡張され、オーバーフロー = 非表示であるため、拡張されたドロップダウン サイズを非表示にして 170 ピクセルとして表示していることです。したがって、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.--%>
}
トランジション効果のないシンプルなドロップダウン メニューやフライアウト メニューが必要な場合は、CSS を使用してください...条件付きで添付された CSS ファイルで定義された動作 (IE6 のみのプロパティ) を備えた .htc ファイル (css3hover?) を使用して、IE6 にすべての要素で :hover をサポートさせることができます。
これをチェックしてください。完璧ではありませんが、機能します。IE 専用であり、FF には影響しません。IE のみの修正を確立するために、onmousedown の通常の JavaScript を使用しました。ただし、jquery の msie は onmousedown でも同様に使用できます。主なアイデアは、選択ボックスを通常に戻す「onchange」とon Blurです...それらの幅は自分で決めてください。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 を指定しました。また、次のように 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 のソリューションは私によって改善されました。以下にも使用されます:ブラッド・ロバートソンの ここにコメントする.
これを .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');
})
}
}
select 要素にスタイルを直接追加できます。
<select name="foo" style="width: 200px">
したがって、この選択項目の幅は 200 ピクセルになります。
あるいは、要素にクラスまたは ID を適用し、スタイルシートで参照することもできます。
今のところ、それはありません。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 要素を作成する方法について書きました。見てみて、これが役立つかどうか教えてください。
投稿された解決策に基づいて サイ, 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:''}); });
});
帽子をリングに投げ入れようかと思った。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-size-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 の各ドロップダウンにドロップダウン クラスを必ず追加してください。
ここでの秘訣は、特殊なクリック機能を使用することです (ここで見つけました) jQueryでDropDownList項目が選択されるたびにイベントが発生します）。ここにある他のソリューションの多くは、イベント ハンドラーの変更を使用しています。これはうまく機能しますが、ユーザーが以前に選択したものと同じオプションを選択した場合はトリガーされません。
他の多くのソリューションと同様、フォーカスとマウスダウンはユーザーがドロップダウンにフォーカスを置いたときのもので、ぼかしはユーザーがクリックして離れたときのものです。
また、ie にのみ影響するように、これに何らかの種類のブラウザ検出を追加することもできます。他のブラウザでは悪く見えませんが、
