it-swarm-id.com

Lebar dropdownlist dalam IE

Di IE, daftar dropdown mengambil lebar yang sama dengan dropbox (saya harap saya masuk akal) sedangkan di Firefox lebar dropdown-daftar bervariasi sesuai dengan konten.

Ini pada dasarnya berarti bahwa saya harus memastikan bahwa dropbox cukup lebar untuk menampilkan pilihan terpanjang. Ini membuat halaman saya terlihat sangat jelek :(

Apakah ada solusi untuk masalah ini? Bagaimana saya bisa menggunakan CSS untuk mengatur lebar berbeda untuk dropbox dan dropdownlist?

92
Nimesh Madhavan

Ini contoh lain jQuery berbasis. Berlawanan dengan semua jawaban lain yang diposting di sini, semua akun papan ketik dan mouse ikut diperhitungkan, 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 kombinasi dengan bagian CSS ini:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

Yang perlu Anda lakukan adalah menambahkan kelas wide ke elemen dropdown yang dipertanyakan.

<select class="wide">
    ...
</select>

Ini adalah contoh jsfiddle . Semoga ini membantu.

102
BalusC

Membuat daftar drop-down Anda sendiri lebih menyebalkan daripada nilainya. Anda dapat menggunakan beberapa JavaScript untuk membuat drop down IE berfungsi.

Ini menggunakan sedikit perpustakaan YUI dan ekstensi khusus untuk memperbaiki IE kotak pilih.

Anda harus memasukkan yang berikut ini dan membungkus <select> elemen dalam <span class="select-box">

Letakkan ini di depan tag tubuh 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>

Edit penerimaan pos:

Anda juga dapat melakukan ini tanpa perpustakaan YUI dan kontrol Hack. 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 memberikannya animasi yang bagus tapi itu tidak perlu. Tugas ini juga dapat diselesaikan dengan jquery dan perpustakaan lain (walaupun, saya belum menemukan dokumentasi eksplisit untuk ini)

- amandemen hasil edit:
IE memiliki masalah dengan onmouseout untuk kontrol pilih (tidak menganggap mouseover pada opsi menjadi mouseover pada pilih). Ini membuat penggunaan mouseout sangat rumit. Solusi pertama adalah yang terbaik yang saya temukan sejauh ini.

anda bisa mencoba yang berikut ...

  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.

12
Sai

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.

9
Justin Fisher

@Thad Anda perlu menambahkan pengatur acara 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 pada klik, bukan hanya elemen. (dan tampaknya gagal di IE6, tetapi bekerja dengan sempurna di Chrome dan IE7)

7
Tinus

Jika Anda menggunakan jQuery maka cobalah IE pilih plugin lebar:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Menerapkan plugin ini membuat kotak pilih di Internet Explorer tampak berfungsi seperti yang akan bekerja di Firefox, Opera dll dengan memungkinkan elemen opsi terbuka lebar tanpa menghilangkan tampilan dan gaya perbaikan Ini juga menambahkan dukungan untuk padding dan batas pada kotak pilih di Internet Explorer 6 dan 7.

5
Ewen

Tidak ada cara untuk melakukannya di IE6/IE7/IE8. Kontrol diambil oleh aplikasi dan IE tidak membuatnya 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.

5
Robert C. Barth

Di jQuery ini bekerja 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");
    }
    });

});
4
Thad

Inilah solusi paling sederhana.

Sebelum saya mulai, saya harus memberi tahu Anda kotak pilih dropdown secara otomatis akan berkembang di hampir semua browser kecuali IE6. Jadi, saya akan melakukan pemeriksaan browser (mis., IE6) dan menulis yang berikut hanya untuk browser itu. Ini dia. Pertama periksa browser.

Kode ajaib akan memperluas kotak pilih dropdown. Satu-satunya masalah dengan solusinya adalah onmouseover dropdown akan diperluas ke 420px, dan karena overflow = tersembunyi kita menyembunyikan ukuran dropdown diperluas dan menunjukkannya sebagai 170px; jadi, panah di sisi kanan ddl akan disembunyikan dan tidak bisa dilihat. tetapi kotak pilih akan diperluas ke 420px; itulah yang benar-benar kita inginkan. Coba saja kode di bawah ini untuk Anda sendiri dan gunakan jika Anda menyukainya.

.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 lain 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.--%>
}
3
bluwater2001

lihat ini .. itu tidak sempurna tetapi berfungsi dan itu untuk IE saja dan tidak mempengaruhi FF. Saya menggunakan javascript biasa untuk onmousedown untuk membuat IE = hanya memperbaiki .. tetapi msie dari jquery dapat digunakan juga di onmousedown .. ide utamanya adalah "onchange" dan blur untuk memiliki kotak pilih kembali ke normal ... memutuskan lebar Anda sendiri untuk mereka 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%'"
2
lucien

jika Anda ingin menu dropdown sederhana &/atau flyout tanpa efek transisi hanya menggunakan CSS ... Anda dapat memaksa IE6 untuk mendukung: arahkan pada semua elemen menggunakan file .htc (css3hover?) dengan perilaku (properti hanya IE6) yang didefinisikan dalam file CSS yang dilampirkan secara kondisional.

2
cam

Jawaban BalusC di atas berfungsi dengan baik, tetapi ada perbaikan kecil yang akan saya tambahkan jika konten dropdown Anda memiliki lebar lebih kecil dari apa yang Anda definisikan 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');
                                }})
2
jbabey

Ini adalah sesuatu yang telah saya lakukan mengambil bit 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 pilih itu sendiri.

Seperti yang Anda lihat, saya telah menetapkan 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-elemen lain yang keluar dari tempatnya ketika dropdown Anda berkembang. Satu-satunya downside di sini adalah bahwa visual menulist menghilang ketika Anda memilih tetapi kembali segera setelah Anda memilih.

Semoga ini bisa membantu seseorang.

2
Derrick

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

2
mcmwhfy

Plugin jQuery lengkap penuh tersedia. Ini mendukung tata letak yang tidak terputus dan interaksi keyboard, lihat halaman demo: http://powerkiki.github.com/ie_expand_select_width/

disclaimer: Saya memberi kode pada hal itu, tambalan selamat datang

2
PowerKiKi
1
Ybbest

Solusi jquery BalusC membaik oleh saya. Digunakan juga: Brad Robertson komentar di sini .

Masukkan saja ini ke dalam .js, gunakan kelas lebar untuk kombo yang Anda inginkan dan jangan menempa untuk memberinya ID. Panggil fungsi di onload (atau documentReady atau apa pun).
Sebagai keledai sederhana itu :)
Ini akan menggunakan lebar yang Anda tetapkan untuk kombo 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');
    })
    }
}
1
Federico Valido

Saya mencoba semua solusi ini dan tidak ada yang bekerja 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 acara api setiap kali item DropDownList dipilih dengan jQuery ). Banyak solusi lain di sini menggunakan perubahan event handler, yang berfungsi dengan baik tetapi tidak akan memicu jika pengguna memilih opsi yang sama seperti yang sebelumnya dipilih.

Seperti banyak solusi lain, fokus dan mousedown adalah ketika pengguna menempatkan dropdown dalam fokus, blur adalah ketika mereka mengklik.

Anda mungkin juga ingin menempel semacam deteksi browser di ini sehingga hanya efek yaitu. Itu tidak terlihat buruk di browser lain

0
RasTheDestroyer

Ini tampaknya bekerja dengan IE6 dan tampaknya tidak merusak orang lain. Hal baik lainnya adalah bahwa ia 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");
        }
    });

});
0
lhoess

Berdasarkan solusi yang diposting oleh Sai , ini adalah bagaimana 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:''}); });
});
0
Ahmad Alfy

Kami memiliki hal yang sama pada sebuah asp: dropdownlist:

Di Firefox (3.0.5) dropdown adalah lebar dari item terpanjang di dropdown, yang seperti lebar 600 piksel atau sesuatu seperti itu.

0
Harlequin

Anda dapat menambahkan gaya langsung ke elemen pilih:

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

Jadi item yang dipilih ini akan menjadi lebar 200 piksel.

Sebagai alternatif, Anda bisa menerapkan kelas atau id ke elemen dan referensi itu di stylesheet

0
Katy

Tautan pagar tanaman (animasi YUI bekerja di sekitar) di jawaban terbaik pertama rusak, saya kira domain kadaluarsa. Saya menyalin kode sebelum kedaluwarsa, 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/

Pada posting blog yang sama saya menulis tentang membuat elemen SELECT yang sama persis seperti yang normal menggunakan menu Tombol YUI. Lihat dan beri tahu saya jika ini membantu!

0
Hammad Tariq

Sejauh ini belum ada. Tidak tahu tentang IE8 tetapi tidak dapat dilakukan di IE6 & IE7, kecuali jika Anda menerapkan fungsionalitas daftar dropdown Anda sendiri dengan javascript. Ada beberapa contoh bagaimana melakukannya di web, meskipun saya tidak melihat banyak manfaat dalam menduplikasi fungsi yang ada.

0
pilsetnieks

Ini diuji di semua versi IE, Chrome, FF & Safari

// Kode JavaScript

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// 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>
0
Arif

Saya harus mengatasi masalah ini dan sekali muncul dengan solusi yang cukup lengkap dan terukur bekerja untuk IE6, 7 dan 8 (dan jelas kompatibel dengan browser lain). Saya telah menulis seluruh artikel tentang hal 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).

0
Aerendel

Saya pikir saya akan melemparkan topi saya di atas ring. Saya membuat aplikasi SaaS dan saya memiliki menu pilih yang disematkan di dalam sebuah tabel. Metode ini berhasil, tetapi itu 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 membuatnya lebih baik adalah melempar pemilih ke dalam z-indexed div.

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