ใน 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 box
คุณจะต้องรวมสิ่งต่อไปนี้และรวม<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 และการควบคุมแฮ็ก สิ่งที่คุณต้องทำจริงๆคือใส่ onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (หรืออะไรก็ได้ที่คุณต้องการ) บนองค์ประกอบที่เลือก การควบคุม YUI ให้ภาพเคลื่อนไหวที่ดี แต่ไม่จำเป็น งานนี้สามารถทำได้ด้วย jquery และไลบรารีอื่น ๆ (แม้ว่าฉันจะไม่พบเอกสารที่ชัดเจนสำหรับสิ่งนี้)
- การแก้ไขการแก้ไข:
IE มีปัญหาเกี่ยวกับ onmouseout สำหรับตัวควบคุมแบบเลือก (ไม่ถือว่าการวางเมาส์บนตัวเลือกเป็นการวางเมาส์เหนือการเลือก) ทำให้การใช้ mouseout ยุ่งยากมาก ทางออกแรกเป็นวิธีที่ดีที่สุดที่ฉันเคยพบมา
คุณสามารถลองทำสิ่งต่อไปนี้ ...
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 select width:
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) และเขียนสิ่งต่อไปนี้ลงในเบราว์เซอร์นั้นเท่านั้น นี่มันไป ขั้นแรกให้ตรวจสอบเบราว์เซอร์
โค้ดจะขยายช่องเลือกแบบเลื่อนลงอย่างน่าอัศจรรย์ ปัญหาเดียวในการแก้ปัญหาคือเมื่อเม้าส์เหนือรายการแบบเลื่อนลงจะขยายเป็น 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.--%>
}
หากคุณต้องการเมนูแบบเลื่อนลงและ / หรือเมนูแบบเลื่อนลงอย่างง่ายโดยไม่มีเอฟเฟกต์การเปลี่ยนแปลงเพียงแค่ใช้ CSS ... คุณสามารถบังคับให้ IE6 สนับสนุน: วางเมาส์บนองค์ประกอบทั้งหมดโดยใช้ไฟล์. htc (css3hover?) ที่มีลักษณะการทำงาน (คุณสมบัติเฉพาะของ IE6) ที่กำหนดไว้ใน ไฟล์ CSS ที่แนบตามเงื่อนไข
ลองดูสิ .. มันไม่สมบูรณ์แบบ แต่ใช้งานได้และสำหรับ IE เท่านั้นและไม่มีผลกับ FF ฉันใช้ javascript ปกติสำหรับ onmousedown เพื่อสร้าง IE เท่านั้นแก้ไข .. แต่ msie จาก jquery สามารถใช้ได้เช่นกันใน onmousedown .. แนวคิดหลักคือ "onchange" และเมื่อเบลอเพื่อให้ช่อง select กลับสู่ปกติ .. . ตัดสินใจว่าคุณมีความกว้างสำหรับสิ่งเหล่านั้น ฉันต้องการ 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 ของคุณให้เพิ่มสิ่งนี้ลงในการผูก mouseover:
.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 เป็นเมนูแบบเลื่อนลงที่มีข้อความตัวเลือกกว้างกว่าความกว้างของตัวเลือกเอง
อย่างที่คุณเห็น l ได้ระบุ document.all เนื่องจากใช้งานได้ใน IE เท่านั้น นอกจากนี้ 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>
สิ่งนี้จะดูแลองค์ประกอบอื่น ๆ ที่เคลื่อนออกจากตำแหน่งเมื่อรายการแบบเลื่อนลงของคุณขยายออก ข้อเสียเพียงประการเดียวคือการมองเห็นของ menulist จะหายไปเมื่อคุณเลือก แต่จะกลับมาทันทีที่คุณเลือก
หวังว่านี่จะช่วยใครบางคนได้
นี่เป็นวิธีที่ดีที่สุดในการดำเนินการนี้:
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 name="foo" style="width: 200px">
ดังนั้นรายการที่เลือกนี้จะมีความกว้าง 200 พิกเซล
หรือคุณสามารถใช้คลาสหรือ id กับองค์ประกอบและอ้างอิงในสไตล์ชีตได้
จนถึงตอนนี้ยังไม่มีเลย ไม่รู้เกี่ยวกับ 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");
}
});
});
ลิงค์ hedgerwow (การแก้ไขภาพเคลื่อนไหว YUI) ในคำตอบที่ดีที่สุดข้อแรกเสียฉันเดาว่าโดเมนหมดอายุแล้ว ฉันคัดลอกรหัสก่อนที่รหัสจะหมดอายุดังนั้นคุณสามารถค้นหาได้ที่นี่ (เจ้าของรหัสสามารถแจ้งให้เราทราบหากฉันละเมิดลิขสิทธิ์โดยการอัปโหลดอีกครั้ง)
ในบล็อกโพสต์เดียวกันฉันเขียนเกี่ยวกับการสร้างองค์ประกอบ SELECT ที่เหมือนกันทุกประการเหมือนกับองค์ประกอบปกติโดยใช้เมนูปุ่ม YUI ลองดูและแจ้งให้เราทราบหากสิ่งนี้ช่วยได้!
ตามวิธีการแก้ปัญหาที่โพสต์โดยSaiนี่คือวิธีดำเนินการกับ 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>
ฉันต้องแก้ไขปัญหานี้และครั้งหนึ่งเคยมีโซลูชันที่ค่อนข้างสมบูรณ์และปรับขนาดได้สำหรับ 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 ) วิธีแก้ปัญหาอื่น ๆ อีกมากมายที่นี่ใช้การเปลี่ยนแปลงตัวจัดการเหตุการณ์ซึ่งทำงานได้ดี แต่จะไม่ทริกเกอร์หากผู้ใช้เลือกตัวเลือกเดียวกับที่เลือกไว้ก่อนหน้านี้
เช่นเดียวกับโซลูชันอื่น ๆ การโฟกัสและการเลื่อนเมาส์มีไว้สำหรับเมื่อผู้ใช้วางเมนูแบบเลื่อนลงในโฟกัสการเบลอจะเกิดขึ้นเมื่อพวกเขาคลิกออกไป
คุณอาจต้องการติดการตรวจจับเบราว์เซอร์บางประเภทเพื่อให้มีผลเฉพาะเช่น มันไม่ได้ดูแย่ในเบราว์เซอร์อื่น ๆ
ผ่านการทดสอบใน IE, Chrome, FF & Safari ทุกเวอร์ชัน
รหัส JavaScript:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
รหัส 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>