Trong IE, danh sách thả xuống có cùng chiều rộng với hộp kéo thả (tôi hy vọng tôi hiểu) trong khi trong Firefox, chiều rộng của danh sách thả xuống thay đổi tùy theo nội dung.
Về cơ bản, điều này có nghĩa là tôi phải đảm bảo rằng dropbox đủ rộng để hiển thị lựa chọn dài nhất có thể. Điều này làm cho trang của tôi trông rất xấu :(
Có cách giải quyết nào cho vấn đề này không? Làm cách nào để tôi có thể sử dụng CSS để đặt các độ rộng khác nhau cho hộp kéo thả và danh sách thả xuống?
Câu trả lời:
Đây là một ví dụ dựa trên jQuery khác . Trái ngược với tất cả các câu trả lời khác được đăng ở đây, nó tính đến tất cả các sự kiện bàn phím và chuột, đặc biệt là các lần nhấp:
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'); });
}Sử dụng nó kết hợp với đoạn CSS này:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}Tất cả những gì bạn cần làm là thêm lớp widevào (các) phần tử thả xuống được đề cập.
<select class="wide">
...
</select>Đây là một ví dụ về jsfiddle . Hi vọng điêu nay co ich.
width: auto !important;
Tạo danh sách thả xuống của riêng bạn là một việc khó khăn hơn là đáng giá. Bạn có thể sử dụng một số JavaScript để làm cho trình duyệt IE thả xuống hoạt động.
Nó sử dụng một chút thư viện YUI và một phần mở rộng đặc biệt để sửa các hộp chọn của IE.
Bạn sẽ cần bao gồm những điều sau đây và bao bọc các <select>phần tử của bạn trong một<span class="select-box">
Đặt những thứ này trước thẻ nội dung của trang của bạn:
<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>Đăng chấp nhận chỉnh sửa:
Bạn cũng có thể làm điều này mà không cần thư viện YUI và kiểm soát Hack. Tất cả những gì bạn thực sự cần làm là đặt onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (hoặc bất kỳ thứ gì bạn muốn) vào phần tử được chọn. Điều khiển YUI cung cấp cho nó hình ảnh động đẹp mắt nhưng nó không cần thiết. Tác vụ này cũng có thể được thực hiện với jquery và các thư viện khác (mặc dù, tôi chưa tìm thấy tài liệu rõ ràng cho việc này)
- sửa đổi đối với bản chỉnh sửa:
IE gặp sự cố với việc sử dụng onmouseout cho các điều khiển được chọn (nó không coi việc di chuột qua các tùy chọn là di chuột qua trên lựa chọn). Điều này làm cho việc sử dụng mouseout rất phức tạp. Giải pháp đầu tiên là giải pháp tốt nhất mà tôi đã tìm thấy cho đến nay.
bạn chỉ có thể thử những cách sau ...
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=''"Tôi đã thử và nó hiệu quả với tôi. Không có gì khác được yêu cầu.
Tôi đã sử dụng giải pháp sau và nó có vẻ hoạt động tốt trong hầu hết các tình huống.
<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>Lưu ý: $ .browser.msie yêu cầu jquery.
@Bạn cũng cần thêm trình xử lý sự kiện mờ
$(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");
}
});
});Tuy nhiên, điều này sẽ vẫn mở rộng hộp chọn khi nhấp chuột, thay vì chỉ các phần tử. (và nó dường như không thành công trong IE6, nhưng hoạt động hoàn hảo trong Chrome và IE7)
Không có cách nào để làm điều đó trong IE6 / IE7 / IE8. Điều khiển được vẽ bởi ứng dụng và IE đơn giản không vẽ nó theo cách đó. Đặt cược tốt nhất của bạn là triển khai trình đơn thả xuống của riêng bạn thông qua HTML / CSS / JavaScript đơn giản nếu điều quan trọng là phải có trình đơn thả xuống một chiều rộng và liệt kê một chiều rộng khác.
Nếu bạn sử dụng jQuery thì hãy thử plugin chiều rộng select của IE này:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Áp dụng plugin này làm cho hộp chọn trong Internet Explorer có vẻ hoạt động như nó sẽ hoạt động trong Firefox, Opera, v.v. bằng cách cho phép các phần tử tùy chọn mở ở toàn bộ chiều rộng mà không làm mất giao diện và kiểu dáng của chiều rộng cố định. Nó cũng bổ sung hỗ trợ cho phần đệm và đường viền trên hộp chọn trong Internet Explorer 6 và 7.
Trong jQuery, điều này hoạt động khá tốt. Giả sử danh sách thả xuống có 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");
}
});
});Đây là giải pháp đơn giản nhất.
Trước khi bắt đầu, tôi phải nói với bạn rằng hộp chọn thả xuống sẽ tự động mở rộng trong hầu hết các trình duyệt ngoại trừ IE6. Vì vậy, tôi sẽ thực hiện kiểm tra trình duyệt (tức là IE6) và chỉ ghi phần sau vào trình duyệt đó. Nó đi từ đây. Đầu tiên hãy kiểm tra trình duyệt.
Mã sẽ mở rộng một cách kỳ diệu hộp chọn thả xuống. Vấn đề duy nhất với giải pháp là onmouseover menu thả xuống sẽ được mở rộng thành 420px, và bởi vì tràn = hidden nên chúng tôi đang ẩn kích thước thả xuống được mở rộng và hiển thị là 170px; vì vậy, mũi tên ở phía bên phải của ddl sẽ bị ẩn và không thể nhìn thấy được. nhưng hộp chọn sẽ được mở rộng thành 420px; đó là những gì chúng tôi thực sự muốn. Chỉ cần thử mã dưới đây cho chính mình và sử dụng nó nếu bạn thích nó.
.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>Trên đây là CSS IE6. CSS chung cho tất cả các trình duyệt khác phải như bên dưới.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}nếu bạn muốn menu thả xuống & / hoặc menu đơn giản mà không có hiệu ứng chuyển tiếp, chỉ cần sử dụng CSS ... bạn có thể buộc IE6 hỗ trợ: di chuột trên tất cả các phần tử bằng cách sử dụng tệp .htc (css3hover?) với hành vi (thuộc tính chỉ IE6) được xác định trong tệp CSS đính kèm có điều kiện.
kiểm tra điều này .. nó không hoàn hảo nhưng nó hoạt động và nó chỉ dành cho IE và không ảnh hưởng đến FF. Tôi đã sử dụng javascript thông thường cho onmousedown để thiết lập chỉ sửa lỗi IE .. nhưng msie từ jquery cũng có thể được sử dụng trong onmousedown .. ý tưởng chính là "onchange" và làm mờ để hộp chọn trở lại bình thường .. . quyết định chiều rộng của riêng bạn cho chúng. Tôi cần 35%.
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"Câu trả lời của BalusC ở trên hoạt động tuyệt vời, nhưng có một bản sửa lỗi nhỏ mà tôi sẽ thêm nếu nội dung của menu thả xuống của bạn có chiều rộng nhỏ hơn những gì bạn xác định trong CSS select.expand, hãy thêm nó vào liên kết di chuột qua:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})Đây là điều mà tôi đã làm để lấy các bit từ đồ của người khác.
$(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' });
});
}
});trong đó cboEosystemity và cboDisability là danh sách thả xuống với văn bản tùy chọn rộng hơn chiều rộng của chính lựa chọn.
Như bạn có thể thấy, tôi đã chỉ định document.all vì nó chỉ hoạt động trong IE. Ngoài ra, tôi đã bọc các menu thả xuống trong các phần tử div như thế này:
<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>Điều này sẽ xử lý các yếu tố khác di chuyển ra khỏi vị trí khi menu thả xuống của bạn mở rộng. Nhược điểm duy nhất ở đây là hình ảnh menulist biến mất khi bạn đang chọn nhưng quay lại ngay sau khi bạn đã chọn.
Hy vọng điều này sẽ giúp ai đó.
đây là cách tốt nhất để làm điều này:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}nó giống hệt như giải pháp BalusC. Chỉ điều này là dễ dàng hơn. ;)
Có sẵn một plugin jQuery chính thức. Nó hỗ trợ bố cục không phá vỡ và tương tác bàn phím, hãy xem trang demo: http://powerkiki.github.com/ie_expand_select_width/
tuyên bố từ chối trách nhiệm: Tôi đã viết mã thứ đó, các bản vá lỗi được hoan nghênh
Giải pháp của jquery BalusC đã được tôi cải thiện. Cũng được sử dụng: Bình luận của Brad Robertson ở đây .
Chỉ cần đặt cái này trong .js, sử dụng lớp rộng cho các tổ hợp mong muốn của bạn và không giả mạo để cung cấp cho nó một Id. Gọi hàm trong onload (hoặc documentReady hoặc bất cứ thứ gì).
Đơn giản như giả định rằng :)
Nó sẽ sử dụng chiều rộng mà bạn đã xác định cho kết hợp làm chiều dài tối thiểu.
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');
})
}
}Cho đến nay không có một. Không biết về IE8 nhưng nó không thể được thực hiện trong IE6 và IE7, trừ khi bạn triển khai chức năng danh sách thả xuống của riêng mình bằng javascript. Có những ví dụ về cách thực hiện trên web, mặc dù tôi không thấy nhiều lợi ích trong việc sao chép chức năng hiện có.
Chúng tôi có cùng một thứ trên một danh sách thả xuống asp::
Trong Firefox (3.0.5), danh sách thả xuống là chiều rộng của mục dài nhất trong danh sách thả xuống, rộng như 600 pixel hoặc tương tự.
Điều này dường như hoạt động với IE6 và dường như không phá vỡ những người khác. Một điều thú vị khác là nó tự động thay đổi menu ngay sau khi bạn thay đổi lựa chọn thả xuống của mình.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});Liên kết hedgerwow (hoạt hình YUI hoạt động xung quanh) trong câu trả lời hay nhất đầu tiên đã bị hỏng, tôi đoán miền này đã hết hạn. Tôi đã sao chép mã trước khi mã hết hạn, vì vậy bạn có thể tìm thấy mã tại đây (chủ sở hữu mã có thể cho tôi biết nếu tôi vi phạm bất kỳ bản quyền nào bằng cách tải lên lại)
Trên cùng một bài đăng trên blog, tôi đã viết về việc tạo một phần tử SELECT giống hệt như phần tử bình thường bằng cách sử dụng menu Nút YUI. Hãy xem và cho tôi biết nếu điều này có ích!
Dựa trên giải pháp được đăng bởi Sai , đây là cách thực hiện với 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:''}); });
});Tôi nghĩ rằng tôi sẽ ném chiếc mũ của mình vào sàn đấu. Tôi tạo một ứng dụng SaaS và tôi có một menu chọn được nhúng bên trong bảng. Phương pháp này hoạt động, nhưng nó làm sai lệch mọi thứ trong bảng.
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';}"Vì vậy, những gì tôi đã làm để làm cho tất cả tốt hơn là ném vùng chọn bên trong một div được lập chỉ mục 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>Tôi đã phải giải quyết vấn đề này và đã từng đưa ra một giải pháp khá hoàn chỉnh và có thể mở rộng hoạt động cho IE6, 7 và 8 (và rõ ràng là tương thích với các trình duyệt khác). Tôi đã viết toàn bộ bài báo về nó ngay tại đây: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Tôi nghĩ tôi muốn chia sẻ điều này cho những người vẫn đang gặp phải vấn đề này, vì không có giải pháp nào ở trên hoạt động trong mọi trường hợp (theo ý kiến của tôi).
Tôi đã thử tất cả các giải pháp này và không giải pháp nào hoàn toàn phù hợp với tôi. Đây là những gì tôi đã nghĩ ra
$(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);Đảm bảo thêm một lớp thả xuống vào mỗi danh sách thả xuống trong html của bạn
Thủ thuật ở đây là sử dụng chức năng nhấp chuột chuyên biệt (Tôi tìm thấy nó ở đây Sự kiện cháy mỗi khi một mục DropDownList được chọn với jQuery ). Nhiều giải pháp khác ở đây sử dụng thay đổi trình xử lý sự kiện, hoạt động tốt nhưng sẽ không kích hoạt nếu người dùng chọn cùng một tùy chọn như đã chọn trước đó.
Giống như nhiều giải pháp khác, tiêu điểm và di chuyển xuống dành cho khi người dùng đặt tiêu điểm thả xuống, làm mờ là khi họ nhấp vào.
Bạn cũng có thể muốn gắn một số loại phát hiện trình duyệt trong này để nó chỉ có tác dụng tức là. Mặc dù vậy, nó trông không tệ trong các trình duyệt khác
Nó đã được thử nghiệm trên tất cả các phiên bản IE, Chrome, FF & Safari
Mã JavaScript:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->Mã 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>