Di IE, daftar dropdown mengambil lebar yang sama dengan dropbox (saya harap saya masuk akal) sedangkan di Firefox, lebar dropdown-list bervariasi sesuai dengan konten.
Ini pada dasarnya berarti saya harus memastikan bahwa dropbox cukup lebar untuk menampilkan pilihan terlama. Ini membuat halaman saya terlihat sangat jelek :(
Apakah ada solusi untuk masalah ini? Bagaimana saya bisa menggunakan CSS untuk mengatur lebar yang berbeda untuk dropbox dan dropdownlist?
Jawaban:
Berikut contoh berbasis jQuery lainnya . Berlawanan dengan semua jawaban lain yang diposting di sini, ini memperhitungkan semua peristiwa keyboard dan mouse, terutama klik:
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'); });
}Gunakan itu dalam kombinasi dengan potongan CSS ini:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}Yang perlu Anda lakukan adalah menambahkan kelas wideke elemen dropdown yang dimaksud.
<select class="wide">
...
</select>Berikut adalah contoh jsfiddle . Semoga ini membantu.
width: auto !important;
Membuat daftar drop-down Anda sendiri lebih merepotkan daripada nilainya. Anda dapat menggunakan beberapa JavaScript untuk membuat drop down IE berfungsi.
Ini menggunakan sedikit perpustakaan YUI dan ekstensi khusus untuk memperbaiki kotak pilih IE.
Anda perlu menyertakan yang berikut ini dan membungkus <select>elemen Anda dalam a<span class="select-box">
Letakkan ini sebelum tag badan halaman Anda:
<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>Posting penerimaan edit:
Anda juga dapat melakukan ini tanpa perpustakaan YUI dan kontrol Peretasan. Yang perlu Anda lakukan hanyalah meletakkan onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (atau apa pun yang Anda inginkan) pada elemen pilih. Kontrol YUI memberikan animasi yang bagus tetapi itu tidak perlu. Tugas ini juga dapat diselesaikan dengan jquery dan pustaka lain (walaupun, saya belum menemukan dokumentasi eksplisit untuk ini)
- amandemen edit:
IE memiliki masalah dengan onmouseout untuk kontrol tertentu (tidak menganggap gerakan mouse pada opsi sebagai gerakan mouse pada pilih). Hal ini membuat penggunaan mouseout menjadi sangat rumit. Solusi pertama adalah yang terbaik yang saya temukan sejauh ini.
Anda bisa mencoba yang berikut ini ...
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=''"Saya mencoba dan itu berhasil untuk saya. Tidak ada lagi yang dibutuhkan.
Saya menggunakan solusi berikut dan tampaknya berfungsi dengan baik di sebagian besar situasi.
<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>Catatan: $ .browser.msie memang membutuhkan jquery.
@Thad Anda perlu menambahkan pengendali peristiwa blur juga
$(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");
}
});
});Namun, ini masih akan memperluas kotak pilih saat diklik, bukan hanya elemennya. (dan tampaknya gagal di IE6, tetapi berfungsi dengan sempurna di Chrome dan IE7)
Tidak ada cara untuk melakukannya di IE6 / IE7 / IE8. Kontrol dibuat oleh aplikasi dan IE tidak menggambarnya seperti itu. Taruhan terbaik Anda adalah menerapkan drop-down Anda sendiri melalui HTML / CSS / JavaScript sederhana jika itu penting untuk memiliki drop-down satu lebar dan daftar lebar lainnya.
Jika Anda menggunakan jQuery, cobalah plugin pilih lebar IE ini:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Menerapkan plugin ini membuat kotak pilih di Internet Explorer tampak berfungsi seperti yang akan berfungsi di Firefox, Opera, dll. Dengan memungkinkan elemen opsi terbuka dengan lebar penuh tanpa kehilangan tampilan dan gaya lebar tetap. Ia juga menambahkan dukungan untuk padding dan border pada kotak pilih di Internet Explorer 6 dan 7.
Di jQuery ini berfungsi dengan cukup baik. Asumsikan dropdown memiliki 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");
}
});
});Inilah solusi paling sederhana.
Sebelum saya mulai, saya harus memberitahu Anda kotak pilih dropdown secara otomatis akan berkembang di hampir semua browser kecuali IE6. Jadi, saya akan melakukan pemeriksaan browser (yaitu, IE6) dan menulis berikut ini hanya untuk browser itu. Ini dia. Pertama, periksa browsernya.
Kode secara ajaib akan memperluas kotak pilih dropdown. Satu-satunya masalah dengan solusi ini adalah onmouseover dropdown akan diperluas menjadi 420px, dan karena overflow = hidden kami menyembunyikan ukuran dropdown yang diperluas dan menampilkannya sebagai 170px; jadi, panah di sisi kanan ddl akan disembunyikan dan tidak bisa dilihat. tetapi kotak pilih akan diperluas menjadi 420px; yang benar-benar kami inginkan. Coba saja kode di bawah ini untuk diri Anda sendiri dan gunakan jika Anda suka.
.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>Di atas adalah IE6 CSS. CSS umum untuk semua browser lainnya harus seperti di bawah ini.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}jika Anda ingin menu dropdown & / atau flyout sederhana tanpa efek transisi, cukup gunakan CSS ... Anda dapat memaksa IE6 untuk mendukung: arahkan kursor ke semua elemen menggunakan file .htc (css3hover?) dengan perilaku (properti khusus IE6) yang ditentukan di file CSS yang dilampirkan secara bersyarat.
lihat ini .. ini tidak sempurna tetapi berfungsi dan hanya untuk IE dan tidak mempengaruhi FF. Saya menggunakan javascript biasa untuk onmousedown untuk menetapkan hanya memperbaiki IE .. tetapi msie dari jquery dapat digunakan juga di onmousedown .. ide utamanya adalah "onchange" dan pada blur agar kotak pilih kembali normal .. Tentukan lebarnya sendiri untuk itu. Saya membutuhkan 35%.
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"Jawaban BalusC di atas berfungsi dengan baik, tetapi ada perbaikan kecil yang akan saya tambahkan jika konten dropdown Anda memiliki lebar yang lebih kecil daripada yang Anda tentukan di CSS select.expand, tambahkan ini ke ikatan mouseover:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})Ini adalah sesuatu yang telah saya lakukan dengan mengambil sedikit dari barang orang lain.
$(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' });
});
}
});di mana cboEthnicity dan cboDisability adalah dropdown dengan teks opsi lebih lebar dari lebar pilihan itu sendiri.
Seperti yang Anda lihat, saya telah menentukan document.all karena ini hanya berfungsi di IE. Juga, saya membungkus dropdown dalam elemen div seperti ini:
<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>Ini menangani elemen lain yang keluar dari tempatnya saat dropdown Anda meluas. Satu-satunya downside di sini adalah visual menu menghilang saat Anda memilih tetapi kembali segera setelah Anda memilih.
Semoga ini bisa membantu seseorang.
ini adalah cara terbaik untuk melakukan ini:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}itu persis sama seperti solusi BalusC. Hanya ini yang lebih mudah. ;)
Tersedia plugin jQuery lengkap. Ini mendukung tata letak dan interaksi keyboard yang tidak melanggar, lihat halaman demo: http://powerkiki.github.com/ie_expand_select_width/
disclaimer: Saya mengkodekan hal itu, patch diterima
Solusi BalusC jquery ditingkatkan oleh saya. Digunakan juga: komentar Brad Robertson di sini .
Taruh saja ini di .js, gunakan kelas lebar untuk kombo yang Anda inginkan dan jangan memalsukannya untuk memberinya Id. Panggil fungsi di onload (atau documentReady atau apa pun).
Sesederhana itu :)
Ini akan menggunakan lebar yang Anda tentukan untuk combo sebagai panjang minimum.
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');
})
}
}Sejauh ini belum ada. Tidak tahu tentang IE8 tetapi tidak dapat dilakukan di IE6 & IE7, kecuali Anda menerapkan fungsionalitas daftar tarik-turun Anda sendiri dengan javascript. Ada contoh cara melakukannya di web, meskipun saya tidak melihat banyak manfaat dalam menduplikasi fungsionalitas yang ada.
Kami memiliki hal yang sama pada asp: dropdownlist:
Di Firefox (3.0.5), dropdown adalah lebar item terpanjang di dropdown, seperti lebar 600 piksel atau semacamnya.
Ini tampaknya bekerja dengan IE6 dan tampaknya tidak merusak yang lain. Hal baik lainnya adalah itu mengubah menu secara otomatis segera setelah Anda mengubah pilihan drop down Anda.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});Tautan hedgerwow (penyelesaian animasi YUI) di jawaban terbaik pertama rusak, saya kira domainnya sudah kadaluwarsa. Saya menyalin kode sebelum kadaluwarsa, sehingga Anda dapat menemukannya di sini (pemilik kode dapat memberi tahu saya jika saya melanggar hak cipta dengan mengunggahnya lagi)
Di postingan blog yang sama saya menulis tentang membuat elemen SELECT yang sama persis seperti yang biasa menggunakan menu Tombol YUI. Silakan lihat dan beri tahu saya jika ini membantu!
Berdasarkan solusi yang diposting oleh Sai , berikut adalah cara melakukannya dengan 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:''}); });
});Saya pikir saya akan melempar topi saya ke atas ring. Saya membuat aplikasi SaaS dan saya memiliki menu pilihan yang disematkan di dalam tabel. Metode ini berhasil, tetapi memiringkan semua yang ada di tabel.
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';}"Jadi apa yang saya lakukan untuk membuat semuanya lebih baik adalah melempar seleksi ke dalam div indeks-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>Saya harus mengatasi masalah ini dan pernah menemukan solusi yang cukup lengkap dan dapat diskalakan yang berfungsi untuk IE6, 7 dan 8 (dan jelas kompatibel dengan browser lain). Saya telah menulis seluruh artikel tentang itu di sini: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Saya pikir saya akan membagikan ini untuk orang-orang yang masih mengalami masalah ini, karena tidak ada solusi di atas yang berfungsi dalam setiap kasus (menurut saya).
Saya mencoba semua solusi ini dan tidak ada yang berhasil sepenuhnya untuk saya. Inilah yang saya pikirkan
$(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);Pastikan untuk menambahkan kelas dropdown ke setiap dropdown di html Anda
Triknya di sini adalah menggunakan fungsi klik khusus (saya menemukannya di sini Peristiwa kebakaran setiap kali item DropDownList dipilih dengan jQuery ). Banyak solusi lain di sini menggunakan perubahan penanganan peristiwa, yang berfungsi dengan baik tetapi tidak akan terpicu jika pengguna memilih opsi yang sama seperti yang dipilih sebelumnya.
Seperti banyak solusi lainnya, fokus dan mousedown adalah untuk saat pengguna meletakkan dropdown dalam fokus, blur adalah saat mereka mengklik.
Anda mungkin juga ingin menempelkan beberapa jenis deteksi browser dalam hal ini sehingga hanya efek yaitu. Ini tidak terlihat buruk di browser lain
Ini diuji di semua versi IE, Chrome, FF & Safari
Kode JavaScript:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->Kode 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>