Lebar dropdownlist di IE

92

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?

javascript html internet-explorer drop-down-menu Nimesh Madhavan
sumber

Jawaban:

102

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.

BalusC
sumber
2
+1: Dari semua solusi yang diusulkan di sini, ini yang terbaik bagi saya. Saya juga perlu melakukan perubahan CSS dan HTML untuk membuatnya bekerja untuk kasus saya. Begitu banyak pekerjaan, untuk sesuatu yang seharusnya berhasil di luar kotak.
kgiannakakis
1
Bekerja dengan IE7 bukan di IE6 - Apakah ada perubahan untuk ini untuk IE6?
DMin
4
@DMin: Maaf, kami tidak mendukung browser kuno dan usang seperti IE6.
BalusC
3
@BalusC: :) Saya tahu teman saya IE menyebalkan - namun saya menggunakan jawaban Anda, ini berfungsi untuk IE7 - menulis kode terpisah untuk IE6 yang menyertakan jawaban + bind Anda. ('Mouseenter' .. - berfungsi dengan baik - Terima kasih lagian! :)
DMin
3
Bergantung pada aturan css Anda yang lain - Anda mungkin harus menambahkan! Penting untuk lebarnya ..width: auto !important;
Tapirboy
14

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.

Ninja Perampasan Tidur
sumber
3
Saya mendapatkan 404 pada kedua tautan itu
Chris B
Masalah dengan perbaikan ini adalah jika Anda memiliki pilihan dinamis, misalnya dalam aplikasi e-niaga untuk atribut produk. Anda tidak akan pernah tahu ID untuk semua dropdown
leen3o
1
Tautan tidak lagi 404 tetapi menunjukkan apa yang saya anggap sebagai spam berbahaya. Saya memang mempertimbangkan untuk tidak memilih, tetapi saya akan bersikap baik dan hanya menunjukkannya.
davur
12

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.

Sai
sumber
1
Keren, saya sedikit memperbaikinya (menggunakan komentar bersyarat untuk deteksi IE) dan menambahkan beberapa komentar, ini berfungsi dengan baik dan tidak ada jQuery atau pustaka lainnya. Lihat di sini: jsbin.com/ubahe5/edit - tolong EDIT jawaban Anda yang AKU INGIN MEMBERI ANDA +1, tetapi saya tidak bisa karena sebelumnya saya salah memilih.
Marco Demaio
9

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.

Justin Fisher
sumber
Bagi siapa pun yang merasa mengantuk yang seharusnya hanya tidur bukan saat turun - butuh waktu beberapa saat untuk melihat masalahnya
shearichard
7

@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)

Tinus
sumber
5

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.

Robert C. Barth
sumber
solusinya adalah: gunakan javascript dan css untuk menyesuaikan lebar secara otomatis pada mouse di atas (dan acara keyboard lainnya ...). baca di sini: css-tricks.com/select-cuts-off-options-in-ie-fix solusi terbaik (kurang invasif)
tuffo19
5

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.

Ewen
sumber
4

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");
    }
    });

});
Eran Medan
sumber
3

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.--%>
}
bluwater2001
sumber
2

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.

kamera
sumber
2

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%'"
lucien
sumber
2

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');
                                }})
jbabey.dll
sumber
2

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.

Kerekan
sumber
2

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. ;)

mcmwhfy
sumber
Saya menguji ulang css Anda, dan berfungsi di Chrome dan agak di Firefox, tetapi tidak di IE8. (Mungkin IE8 saya adalah versi yang berbeda?) Sejak itu saya datang dengan solusi berbasis js saya sendiri. Lihat tahirhassan.blogspot.co.uk/2013/02/…
Tahir Hassan
Bermain sedikit di IE8 dengan ini dan tweak kemudian membantu. Saya hanya harus meletakkan induk <td> ke lebar tetap, memposisikan ulang nilai teratas dan ¡ahí estuvo !. Terima kasih
j4v1
1

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');
    })
    }
}
Federico Valido
sumber
0

Anda dapat menambahkan gaya langsung ke elemen pemilihan:

<select name="foo" style="width: 200px">

Jadi item pilihan ini akan memiliki lebar 200 piksel.

Alternatifnya, Anda dapat menerapkan kelas atau id ke elemen dan mereferensikannya di stylesheet

Katy
sumber
0

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.

pilsetnieks
sumber
0

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.


sumber
0

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");
        }
    });

});
lhoess
sumber
0

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)

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

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!

Hammad Tariq
sumber
0

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:''}); });
});
Ahmad Alfy
sumber
0

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>
n0nag0n
sumber
0

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).

Aerendel
sumber
0

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

RasTheDestroyer
sumber
0

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>
Arif
sumber