Độ rộng danh sách thả xuống trong IE
Trong IE, danh sách thả xuống có cùng chiều rộng với hộp thả xuống (tôi hy vọng tôi có ý nghĩa) trong khi trong Firefox, độ rộng của danh sách thả xuống thay đổi tùy theo nội dung.
Điều này về cơ bản 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 xí :(
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 dropbox và danh sách thả xuống?
Đây là một ví dụ khác jQuery . Trái với tất cả các câu trả lời khác được đăng ở đây, phải 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 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 wide vào (các) phần tử thả xuống trong câu hỏi.
<select class="wide">
...
</select>
Đây là một ví dụ jsfiddle . Hi vọng điêu nay co ich.
Tạo danh sách thả xuống của riêng bạn là một nỗi đau hơn nó đáng giá. Bạn có thể sử dụng một số JavaScript để làm cho công việc thả xuống IE.
Nó sử dụng một chút của thư viện YUI và một phần mở rộng đặc biệt để sửa IE chọn hộp.
Bạn sẽ cần bao gồm các phần sau và bọc các phần tử <select> Của bạn trong <span class="select-box">
Đặt chúng trước thẻ body 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>
Chỉnh sửa bài chấp nhận:
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 một onmouseover = "this.style. Thong = 'auto'" onmouseout = "this.style. Mật = '100px'" (hoặc bất cứ điều gì bạn muốn) vào phần tử chọn. Điều khiển YUI cung cấp cho nó hoạt hình Nice nhưng không cần thiết. Nhiệm 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 không tìm thấy tài liệu rõ ràng cho việc này)
- sửa đổi để chỉnh sửa:
[.___.] IE có vấn đề với onmouseout đối với các điều khiển chọn (nó không xem việc di chuột qua các tùy chọn là di chuột qua phần chọn). Điều này làm cho việc sử dụng chuột rất khó khăn. Giải pháp đầu tiên là tốt nhất tôi tìm thấy cho đến nay.
bạn có thể thử những điều sau đây ...
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ó làm việc cho tôi. Không có gì khác là bắt buộc.
Tôi đã sử dụng giải pháp sau đây và nó dường như 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 không yêu cầu jquery.
@ Bạn cũng cần thêm một 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 vẫn sẽ mở rộng vùng chọn khi nhấp, thay vì chỉ các phần tử. (và dường như thất bại trong IE6, nhưng hoạt động hoàn hảo trong Chrome và IE7)
Nếu bạn sử dụng jQuery thì hãy thử cái này IE chọn plugin chiều rộng:
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 thành phần tùy chọn mở ở toàn bộ chiều rộng mà không mất giao diện và kiểu cố định chiều rộng. Nó cũng thêm hỗ trợ cho phần đệm và viền trên hộp chọn trong Internet Explorer 6 và 7.
Không có cách nào để làm điều đó trong IE6/IE7/IE8. Kiểm soát được rút ra bởi ứng dụng và IE đơn giản là không vẽ theo cách đó. Cách tốt nhất của bạn là thực hiệ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 đối với có một chiều rộng thả xuống và liệt kê một chiều rộng khác.
Trong jQuery, nó hoạt động khá tốt. Giả sử danh sách thả xuống có id = "thả xuống".
$(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 cho bạn biết hộp chọn thả xuống sẽ tự động mở rộng trong hầu hết tất cả 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ỉ viết những điều sau đây cho trình duyệt đó. Nó đi từ đây. Đầu tiên 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, trình đơn thả xuống sẽ được mở rộng thành 420px và vì overflow = hidden, chúng tôi đang ẩn kích thước thả xuống mở rộng và hiển thị nó 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. nhưng hộp chọn sẽ được mở rộng thành 420px; đó là những gì chúng ta 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ư dưới đây.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
kiểm tra xem .. nó không hoàn hảo nhưng nó hoạt động và nó chỉ 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 IE = chỉ sửa chữa .. 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 bạn cho những người đó 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%'"
nếu bạn muốn một menu thả xuống &/hoặc flyout đơn giản 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 lên tất cả phần tử bằ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.
Câu trả lời của BalusC ở trên hoạt động rất tốt, nhưng có một cách khắc phục nhỏ tôi sẽ thêm vào nếu nội dung thả xuống của bạn có chiều rộng nhỏ hơn so với những gì bạn xác định trong CSS select.Exand, hãy thêm điều này vào liên kết di chuột:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
Đây là điều tôi đã thực hiện lấy bit từ những thứ 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 đó cboEthnicity và cboDisability là các 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 phần chọn.
Như bạn có thể thấy, tôi đã chỉ định document.all vì điều này chỉ hoạt động trong IE. Ngoài ra, tôi đã bao gồm các danh sách 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 quan tâm đến các yếu tố khác di chuyển khỏi vị trí khi 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 khi bạn đã chọn.
Hy vọng điều này sẽ giúp được 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. ;)
Một plugin jQuery đầy đủ có sẵn. 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_apiand_select_ rắc /
từ chối trách nhiệm: Tôi đã mã hóa điều đó, các bản vá chào mừng
Giải pháp BalusC của jquery được cải thiện bởi tôi. Cũng được sử dụng: Brad Robertson's bình luận tại đây .
Chỉ cần đặt nó trong một .js, sử dụng lớp rộng cho các combo 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ứ điều gì).
[.__.] Như một cái mông đơn giản mà :)
[.___.] Nó sẽ sử dụng chiều rộng mà bạn đã xác định cho kết hợp là 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');
})
}
}
Tôi đã thử tất cả các giải pháp này và không có 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);
Hãy chắc chắn để thêm một lớp thả xuống cho mỗi lần 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 dụng (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 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 tùy chọn tương tự như đã chọn trước đó.
Giống như nhiều giải pháp khác, tiêu điểm và mousedown dành cho khi người dùng đặt danh sách thả xuống trong tiêu cự, mờ là khi họ nhấp đi.
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ó hiệu lực. Nó trông không tệ trong các trình duyệt khác
Đ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 khi bạn thay đổi lựa chọn thả xuống.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
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:''}); });
});
Chúng tôi có một điều tương tự trên một asp: danh sách thả xuống:
Trong Firefox (3.0.5), phần thả xuống là chiều rộng của mục dài nhất trong danh sách thả xuống, giống như chiều rộng 600 pixel hoặc đại loại như thế.
Bạn có thể thêm một kiểu trực tiếp vào phần tử chọn:
<select name="foo" style="width: 200px">
Vì vậy, mục chọn này sẽ rộng 200 pixel.
Ngoài ra, bạn có thể áp dụng một lớp hoặc id cho thành phần và tham chiếu nó trong biểu định kiểu
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 rằng tên miền đã hết hạn. Tôi đã sao chép mã trước khi nó hết hạn, vì vậy bạn có thể tìm thấy nó ở đâ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ử CHỌN chính xác giống như phần tử bình thường bằng menu Nút YUI. Có một cái nhìn và cho tôi biết nếu điều này giúp!
Cho đến nay không có một. Không biết về IE8 nhưng không thể thực hiện được trong IE6 & 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ó.
Nó đã được thử nghiệm trong tất cả các phiên bản IE, Chrome, FF & Safari
// Mã JavaScript
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>
// 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>
Tôi đã phải giải quyết vấn đề này và một khi đã đư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 tương thích với các trình duyệt khác). Tôi đã viết cả một bài báo về nó ngay tại đây: http://www.edgeoftheworld.fr/wp/work/deals-with-fixed-sized-dropdown-lists-in-iNET-Explorer
Tôi nghĩ rằng tôi sẽ 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 nghĩ tôi sẽ ném mũ vào vòng. 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 một bảng. Phương pháp này hoạt động, nhưng nó làm 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 lựa chọn bên trong div chỉ số 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>