عرض القائمة المنسدلة في IE
https://stackoverflow.com/questions/73960
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
في IE، تأخذ القائمة المنسدلة نفس عرض صندوق الإسقاط (آمل أن أكون منطقيًا) بينما في Firefox يختلف عرض القائمة المنسدلة وفقًا للمحتوى.
هذا يعني في الأساس أنه يجب علي التأكد من أن صندوق الإسقاط واسع بما يكفي لعرض أطول اختيار ممكن.وهذا يجعل صفحتي تبدو قبيحة للغاية :(
هل هناك أي حل لهذه المشكلة؟كيف يمكنني استخدام CSS لتعيين عروض مختلفة لصندوق الإسقاط والقائمة المنسدلة؟
المحلول
هنا آخر مسج المثال القائم.على عكس جميع الإجابات الأخرى المنشورة هنا، فإنه يأخذ في الاعتبار جميع أحداث لوحة المفاتيح والماوس، وخاصة النقرات:
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">
ضع هذه العناصر قبل العلامة الأساسية لصفحتك:
<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.كل ما عليك فعله حقًا هو وضع onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (أو أي شيء تريده) على عنصر التحديد.يمنحه عنصر التحكم YUI رسومًا متحركة رائعة ولكنه ليس ضروريًا.يمكن أيضًا إنجاز هذه المهمة باستخدام jquery والمكتبات الأخرى (على الرغم من أنني لم أجد وثائق واضحة لهذا)
- تعديل التحرير:
لدى IE مشكلة في تشغيل الماوس لعناصر التحكم المحددة (لا يعتبر تمرير الماوس على الخيارات بمثابة تمرير بالماوس على التحديد).وهذا يجعل استخدام الماوس أمرًا صعبًا للغاية.الحل الأول هو أفضل ما وجدته حتى الآن.
يمكنك فقط تجربة ما يلي ...
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 لا يتطلب مسج.
@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 ببساطة بهذه الطريقة.أفضل رهان لك هو تنفيذ القائمة المنسدلة الخاصة بك عبر HTML/CSS/JavaScript البسيط إذا كان من المهم أن يكون للقائمة المنسدلة عرض واحد والقائمة عرض آخر.
إذا كنت تستخدم jQuery، فجرّب هذا البرنامج الإضافي لتحديد العرض في IE:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
يؤدي تطبيق هذا المكون الإضافي إلى جعل مربع التحديد في Internet Explorer يبدو وكأنه يعمل كما يعمل في Firefox وOpera وما إلى ذلك من خلال السماح لعناصر الخيارات بالفتح بالعرض الكامل دون فقدان شكل ونمط العرض الثابت.كما أنه يضيف دعمًا للحشوة والحدود في مربع التحديد في Internet Explorer 6 و7.
في jQuery يعمل هذا بشكل جيد إلى حد ما.افترض أن القائمة المنسدلة بها معرف = "منسدلة".
$(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...يمكنك إجبار IE6 على دعم :hover على كل العناصر باستخدام ملف .htc (css3hover؟) مع السلوك (خاصية IE6 فقط) المحدد في ملف CSS المرفق بشكل مشروط.
تحقق من هذا..إنها ليست مثالية ولكنها تعمل وهي مخصصة لـ IE فقط ولا تؤثر على FF.لقد استخدمت جافا سكريبت العادي لـ onmousedown لتأسيس إصلاح IE فقط ..ولكن يمكن استخدام msie من jquery أيضًا في 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%'"
تعمل إجابة 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 عبارة عن قوائم منسدلة تحتوي على نص خيار أوسع من عرض التحديد نفسه.
كما ترون، لقد قمت بتحديد 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>
يعتني هذا بالعناصر الأخرى التي تتحرك خارج مكانها عند توسيع القائمة المنسدلة.الجانب السلبي الوحيد هنا هو أن القائمة المرئية تختفي عند التحديد ولكنها تعود بمجرد التحديد.
أمل أن هذا يساعد شخصاما.
هذه هي أفضل طريقة للقيام بذلك:
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، واستخدام الفئة الواسعة للمجموعات التي تريدها ولا تزور منحها معرفًا.استدعاء الوظيفة في التحميل (أو 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 name="foo" style="width: 200px">
لذلك سيكون عرض هذا العنصر المحدد 200 بكسل.
وبدلاً من ذلك، يمكنك تطبيق فئة أو معرف على العنصر والإشارة إليه في ورقة الأنماط
حتى الآن لا يوجد واحد.لا تعرف شيئًا عن IE8 ولكن لا يمكن القيام بذلك في IE6 وIE7، إلا إذا قمت بتنفيذ وظيفة القائمة المنسدلة الخاصة بك باستخدام جافا سكريبت.هناك أمثلة حول كيفية القيام بذلك على الويب، على الرغم من أنني لا أرى فائدة كبيرة في تكرار الوظائف الحالية.
لدينا نفس الشيء في asp:dropdownlist:
في Firefox(3.0.5)، القائمة المنسدلة هي عرض أطول عنصر في القائمة المنسدلة، والذي يبلغ عرضه 600 بكسل أو شيء من هذا القبيل.
يبدو أن هذا يعمل مع IE6 ولا يبدو أنه يعطل الآخرين.والشيء الجميل الآخر هو أنه يغير القائمة تلقائيًا بمجرد تغيير تحديد القائمة المنسدلة.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
رابط التحوط (الحل البديل للرسوم المتحركة YUI) في أول إجابة أفضل معطل، أعتقد أن المجال قد انتهت صلاحيته.لقد قمت بنسخ الكود قبل انتهاء صلاحيته، لذا يمكنك العثور عليه هنا (يمكن لمالك الكود إخباري إذا كنت انتهك أي حقوق نشر عن طريق تحميله مرة أخرى)
كتبت في نفس مشاركة المدونة عن إنشاء نفس عنصر التحديد تمامًا مثل العنصر العادي باستخدام قائمة زر YUI.إلقاء نظرة واسمحوا لي أن أعرف إذا كان هذا يساعد!
بناءً على الحل الذي نشره ساي, هذه هي الطريقة للقيام بذلك باستخدام 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';}"
لذا فإن ما فعلته لجعل الأمر أفضل هو وضع التحديد داخل div المفهرس بـ z.
<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
// كود جافا سكريبت
<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 الخاص بك
الحيلة هنا هي استخدام وظيفة النقر المتخصصة (لقد وجدتها هنا إطلاق الحدث في كل مرة يتم فيها تحديد عنصر DropDownList باستخدام jQuery).تستخدم العديد من الحلول الأخرى هنا تغيير معالج الأحداث، والذي يعمل بشكل جيد ولكن لن يتم تشغيله إذا قام المستخدم بتحديد نفس الخيار الذي تم تحديده مسبقًا.
مثل العديد من الحلول الأخرى، يكون التركيز وتحريك الماوس مخصصين عندما يضع المستخدم القائمة المنسدلة في موضع التركيز، ويتم استخدام التمويه عند النقر بعيدًا.
قد ترغب أيضًا في الالتزام بنوع من اكتشاف المتصفح في هذا بحيث يؤثر فقط على سبيل المثال.لا يبدو الأمر سيئًا في المتصفحات الأخرى بالرغم من ذلك
