Szerokość listy rozwijanej w IE

Question 1

W IE lista rozwijana ma taką samą szerokość jak dropbox (mam nadzieję, że mam sens), podczas gdy w przeglądarce Firefox szerokość listy rozwijanej różni się w zależności od zawartości.

Zasadniczo oznacza to, że muszę się upewnić, że dropbox jest wystarczająco szeroki, aby wyświetlić najdłuższy możliwy wybór. To sprawia, że moja strona wygląda bardzo brzydko :(

Czy istnieje obejście tego problemu? Jak mogę użyć CSS, aby ustawić różne szerokości skrzynki domyślnej i listy rozwijanej?

Question 2

Oto kolejny przykład oparty na jQuery . W przeciwieństwie do wszystkich innych zamieszczonych tutaj odpowiedzi, bierze pod uwagę wszystkie zdarzenia klawiatury i myszy, zwłaszcza kliknięcia:

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

Użyj go w połączeniu z tym fragmentem CSS:

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

Wszystko, co musisz zrobić, to dodać klasę widedo odpowiednich elementów listy rozwijanej.

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

Oto przykład jsfiddle . Mam nadzieję że to pomoże.

Question 3

Tworzenie własnej listy rozwijanej jest bardziej uciążliwe niż warte. Możesz użyć JavaScript, aby rozwinąć IE.

Używa trochę biblioteki YUI i specjalnego rozszerzenia do naprawiania pól wyboru IE.

Będziesz musiał uwzględnić następujące <select>elementy i opakować swoje elementy w plik<span class="select-box">

Umieść je przed tagiem body swojej strony:

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

Edycja akceptacji postu:

Możesz to również zrobić bez biblioteki YUI i kontroli hakowania. Wszystko, co naprawdę musisz zrobić, to umieścić onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (lub cokolwiek chcesz) na wybranym elemencie. Kontrolka YUI zapewnia przyjemną animację, ale nie jest to konieczne. To zadanie można również wykonać za pomocą jquery i innych bibliotek (chociaż nie znalazłem wyraźnej dokumentacji na ten temat)

- poprawka do edycji:
IE ma problem z przyciskiem onmouseout dla kontrolek zaznaczania (nie bierze pod uwagę najechania kursorem na opcje będące najechaniem myszą na zaznaczenie) To sprawia, że korzystanie z myszy jest bardzo trudne. Pierwsze rozwiązanie jest najlepsze, jakie do tej pory znalazłem.

Question 4

możesz po prostu wypróbować następujące ...

  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=''"

Próbowałem i to działa na mnie. Nic więcej nie jest wymagane.

Question 5

Użyłem następującego rozwiązania i wydaje się, że działa dobrze w większości sytuacji.

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

Uwaga: $ .browser.msie wymaga jquery.

Question 6

@Thad, musisz również dodać procedurę obsługi zdarzenia rozmycia

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

Jednak spowoduje to rozszerzenie pola wyboru po kliknięciu, a nie tylko elementy. (i wydaje się, że zawodzi w IE6, ale działa doskonale w Chrome i IE7)

Question 7

W IE6 / IE7 / IE8 nie da się tego zrobić. Sterowanie jest rysowane przez aplikację, a IE po prostu nie rysuje tego w ten sposób. Najlepszym rozwiązaniem jest zaimplementowanie własnej listy rozwijanej za pomocą prostego HTML / CSS / JavaScript, jeśli tak ważne jest, aby lista rozwijana miała jedną szerokość, a lista inną szerokość.

Question 8

Jeśli używasz jQuery, wypróbuj tę wtyczkę IE Select width:

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

Zastosowanie tej wtyczki sprawia, że pole wyboru w przeglądarce Internet Explorer wydaje się działać tak, jak działałoby w przeglądarce Firefox, Opera itp., Umożliwiając otwieranie elementów opcji z pełną szerokością bez utraty wyglądu i stylu o stałej szerokości. Dodaje również obsługę wypełniania i obramowań w polu wyboru w programie Internet Explorer 6 i 7.

Question 9

W jQuery działa to całkiem dobrze. Załóżmy, że menu ma 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");
    }
    });

});

Question 10

Oto najprostsze rozwiązanie.

Zanim zacznę, muszę powiedzieć, że pole wyboru rozwijane automatycznie rozwinie się w prawie wszystkich przeglądarkach z wyjątkiem IE6. Zrobiłbym więc sprawdzenie przeglądarki (tj. IE6) i napisałbym tylko do tej przeglądarki. Oto jest. Najpierw sprawdź przeglądarkę.

Kod w magiczny sposób rozszerzy rozwijane pole wyboru. Jedynym problemem związanym z rozwiązaniem jest to, że po najechaniu myszą lista rozwijana zostanie rozwinięta do 420 pikseli, a ponieważ przepełnienie = ukryte, ukrywamy rozmiar rozwiniętego menu rozwijanego i wyświetlamy go jako 170px; tak więc strzałka po prawej stronie ddl będzie ukryta i niewidoczna. ale pole wyboru zostanie rozszerzone do 420px; czego naprawdę chcemy. Po prostu wypróbuj poniższy kod i użyj go, jeśli chcesz.

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

Powyższe to IE6 CSS. Wspólny kod CSS dla wszystkich innych przeglądarek powinien wyglądać jak poniżej.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}

Question 11

jeśli chcesz mieć proste menu rozwijane i / lub wysuwane bez efektów przejścia, po prostu użyj CSS ... możesz zmusić IE6 do obsługi: najedź na cały element za pomocą pliku .htc (css3hover?) z zachowaniem (tylko właściwość IE6) zdefiniowanym w dołączony warunkowo plik CSS.

Question 12

sprawdź to .. nie jest doskonały, ale działa i jest przeznaczony tylko dla IE i nie wpływa na FF. Użyłem zwykłego javascript dla onmousedown, aby ustalić tylko poprawkę dla IE .. ale msie z jquery może być również użyty w onmousedown .. głównym pomysłem jest "zmiana" i rozmycie, aby pole wyboru powróciło do normalnego .. , zdecyduj, że masz dla nich własną szerokość. Potrzebowałem 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"

Question 13

Powyższa odpowiedź BalusC działa świetnie, ale jest mała poprawka, którą dodałbym, jeśli zawartość twojego menu rozwijanego ma mniejszą szerokość niż ta, którą zdefiniujesz w swoim CSS select. Rozwiń, dodaj to do wiązania myszy:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})

Question 14

To jest coś, co zrobiłem, biorąc fragmenty z rzeczy innych ludzi.

        $(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' });
            });

        }
    });

gdzie cboEthnicity i cboDisability to listy rozwijane z tekstem opcji szerszym niż szerokość samego zaznaczenia.

Jak widać, wskazałem document.all, ponieważ działa to tylko w IE. Ponadto umieściłem listy rozwijane w elementach div w następujący sposób:

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

Dba to o to, aby inne elementy przemieszczały się z miejsca, gdy rozwijane jest menu. Jedynym minusem jest to, że wizualizacja menulisty znika podczas wybierania, ale powraca zaraz po wybraniu.

Mam nadzieję, że to komuś pomoże.

Question 15

to najlepszy sposób na zrobienie tego:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

to dokładnie to samo, co rozwiązanie BalusC. Tylko to jest łatwiejsze. ;)

Question 16

Dostępna jest pełnoprawna wtyczka jQuery. Obsługuje niezłamujący układ i interakcje z klawiaturą, sprawdź stronę demonstracyjną: http://powerkiki.github.com/ie_expand_select_width/

zastrzeżenie: zakodowałem to, poprawki mile widziane

Question 17

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

Question 18

Rozwiązanie jQuery BalusC poprawione przeze mnie. Wykorzystano także: komentarz Brada Robertsona tutaj .

Po prostu umieść to w .js, użyj szerokiej klasy dla swoich pożądanych kombinacji i nie próbuj nadawać mu identyfikatora. Wywołaj funkcję w onload (lub documentReady lub cokolwiek).
To takie proste :)
Użyje szerokości, którą zdefiniowałeś dla kombinacji jako minimalna długość.

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

Question 19

Możesz dodać styl bezpośrednio do wybranego elementu:

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

Więc ten wybrany element będzie miał szerokość 200 pikseli.

Alternatywnie możesz zastosować klasę lub identyfikator do elementu i odwołać się do niego w arkuszu stylów

Question 20

Jak dotąd nie ma. Nie wiem o IE8, ale nie można tego zrobić w IE6 i IE7, chyba że zaimplementujesz własną funkcjonalność listy rozwijanej w javascript. Istnieją przykłady, jak to zrobić w Internecie, chociaż nie widzę wiele korzyści z powielania istniejących funkcji.

Question 21

Mamy to samo na asp: lista rozwijana:

W przeglądarce Firefox (3.0.5) lista rozwijana to szerokość najdłuższego elementu na liście, która ma szerokość 600 pikseli lub coś podobnego.

Question 22

Wydaje się, że działa to z IE6 i nie przeszkadza innym. Inną fajną rzeczą jest to, że zmienia menu automatycznie, gdy tylko zmienisz listę rozwijaną.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});

Question 23

Link hedgerwow (obejście animacji YUI) w pierwszej najlepszej odpowiedzi jest uszkodzony, domena wygasła. Skopiowałem kod, zanim wygasł, więc możesz go znaleźć tutaj (właściciel kodu może dać mi znać, jeśli naruszam jakiekolwiek prawa autorskie, przesyłając go ponownie)

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

W tym samym poście na blogu napisałem o tworzeniu dokładnie tego samego elementu SELECT, co normalny za pomocą menu przycisku YUI. Spójrz i daj mi znać, jeśli to pomoże!

Question 24

Opierając się na rozwiązaniu opublikowanym przez Sai , oto jak to zrobić z 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:''}); });
});

Question 25

Myślałem, że rzucę kapelusz na ring. Tworzę aplikację SaaS i mam menu wyboru osadzone w tabeli. Ta metoda zadziałała, ale wypaczyła wszystko w tabeli.

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

Więc co zrobiłem, aby wszystko było lepsze, wrzuciłem zaznaczenie do elementu div indeksowanego 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>

Question 26

Musiałem obejść ten problem i raz wymyśliłem całkiem kompletne i skalowalne rozwiązanie działające dla IE6, 7 i 8 (i oczywiście kompatybilne z innymi przeglądarkami). Napisałem o tym cały artykuł tutaj: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Pomyślałem, że podzielę się tym z osobami, które nadal mają ten problem, ponieważ żadne z powyższych rozwiązań nie działa w każdym przypadku (moim zdaniem).

Question 27

Wypróbowałem wszystkie te rozwiązania i żadne nie działało całkowicie dla mnie. Oto, co wymyśliłem

$(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);

Pamiętaj, aby dodać klasę rozwijaną do każdego menu rozwijanego w html

Sztuczka polega na użyciu wyspecjalizowanej funkcji kliknięcia (znalazłem ją tutaj Zdarzenie Fire za każdym razem, gdy element DropDownList jest wybierany za pomocą jQuery ). Wiele innych rozwiązań tutaj korzysta ze zmiany obsługi zdarzeń, która działa dobrze, ale nie zostanie wyzwolona, jeśli użytkownik wybierze tę samą opcję, która została wcześniej wybrana.

Podobnie jak w przypadku wielu innych rozwiązań, fokus i wyciszenie kursora są używane, gdy użytkownik ustawia fokus na rozwijanym menu, a rozmycie - gdy kliknie.

Możesz również chcieć zastosować w tym celu jakiś rodzaj wykrywania przeglądarki, aby działał tylko np. Nie wygląda to jednak źle w innych przeglądarkach

Question 28

Jest testowany we wszystkich wersjach IE, Chrome, FF i Safari

Kod JavaScript:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

Kod 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>

Answer 1

W IE lista rozwijana ma taką samą szerokość jak dropbox (mam nadzieję, że mam sens), podczas gdy w przeglądarce Firefox szerokość listy rozwijanej różni się w zależności od zawartości.

Zasadniczo oznacza to, że muszę się upewnić, że dropbox jest wystarczająco szeroki, aby wyświetlić najdłuższy możliwy wybór. To sprawia, że moja strona wygląda bardzo brzydko :(

Czy istnieje obejście tego problemu? Jak mogę użyć CSS, aby ustawić różne szerokości skrzynki domyślnej i listy rozwijanej?

Answer 2

102

Oto kolejny przykład oparty na jQuery . W przeciwieństwie do wszystkich innych zamieszczonych tutaj odpowiedzi, bierze pod uwagę wszystkie zdarzenia klawiatury i myszy, zwłaszcza kliknięcia:

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

Użyj go w połączeniu z tym fragmentem CSS:

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

Wszystko, co musisz zrobić, to dodać klasę widedo odpowiednich elementów listy rozwijanej.

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

Oto przykład jsfiddle . Mam nadzieję że to pomoże.

BalusC
źródło

2

+1: Ze wszystkich proponowanych tutaj rozwiązań wyszło to najlepiej. Musiałem również wprowadzić zmiany w CSS i HTML, aby działało w moim przypadku. Tyle pracy na coś, co powinno działać po wyjęciu z pudełka.

kgiannakakis

1

Działa z IE7, a nie z IE6 - Czy jest jakaś poprawka dla IE6?

DM:

4

@DMin: Przepraszamy, nie obsługujemy starych i przestarzałych przeglądarek, takich jak IE6.

BalusC,

3

@BalusC: :) Wiem, że mój przyjaciel IE jest do bani - niemniej jednak użyłem twojej odpowiedzi, działało dla IE7 - napisałem osobny kod dla IE6, który zawierał twoją odpowiedź + bind. ('Mouseenter' .. - działało dobrze - Dzięki tak czy inaczej! :)

DM w lipcu

3

W zależności od innych reguł CSS - może trzeba dodać ważną szerokości ..!width: auto !important;

Tapirboy

Answer 3

2

+1: Ze wszystkich proponowanych tutaj rozwiązań wyszło to najlepiej. Musiałem również wprowadzić zmiany w CSS i HTML, aby działało w moim przypadku. Tyle pracy na coś, co powinno działać po wyjęciu z pudełka.

kgiannakakis

Answer 4

1

Działa z IE7, a nie z IE6 - Czy jest jakaś poprawka dla IE6?

DM:

Answer 5

4

@DMin: Przepraszamy, nie obsługujemy starych i przestarzałych przeglądarek, takich jak IE6.

BalusC,

Answer 6

3

@BalusC: :) Wiem, że mój przyjaciel IE jest do bani - niemniej jednak użyłem twojej odpowiedzi, działało dla IE7 - napisałem osobny kod dla IE6, który zawierał twoją odpowiedź + bind. ('Mouseenter' .. - działało dobrze - Dzięki tak czy inaczej! :)

DM w lipcu

Answer 7

3

W zależności od innych reguł CSS - może trzeba dodać ważną szerokości ..!width: auto !important;

Tapirboy

Answer 8

Tworzenie własnej listy rozwijanej jest bardziej uciążliwe niż warte. Możesz użyć JavaScript, aby rozwinąć IE.

Używa trochę biblioteki YUI i specjalnego rozszerzenia do naprawiania pól wyboru IE.

Będziesz musiał uwzględnić następujące <select>elementy i opakować swoje elementy w plik<span class="select-box">

Umieść je przed tagiem body swojej strony:

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

Edycja akceptacji postu:

Możesz to również zrobić bez biblioteki YUI i kontroli hakowania. Wszystko, co naprawdę musisz zrobić, to umieścić onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (lub cokolwiek chcesz) na wybranym elemencie. Kontrolka YUI zapewnia przyjemną animację, ale nie jest to konieczne. To zadanie można również wykonać za pomocą jquery i innych bibliotek (chociaż nie znalazłem wyraźnej dokumentacji na ten temat)

- poprawka do edycji:
IE ma problem z przyciskiem onmouseout dla kontrolek zaznaczania (nie bierze pod uwagę najechania kursorem na opcje będące najechaniem myszą na zaznaczenie) To sprawia, że korzystanie z myszy jest bardzo trudne. Pierwsze rozwiązanie jest najlepsze, jakie do tej pory znalazłem.

Answer 9

3

Dostaję 404 na obu tych linkach

Chris B

Answer 10

Problem z tą poprawką polega na tym, że masz dynamiczne wybieranie, na przykład w aplikacji e-commerce dla atrybutów produktu. Nigdy nie poznasz identyfikatorów wszystkich

list

Answer 11

1

Linki nie są już 404, ale pokazują, co uważam za złośliwy spam. Rozważałem głosowanie negatywne, ale będę miły i tylko to wskażę.

davur

Answer 12

12

możesz po prostu wypróbować następujące ...

  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=''"

Próbowałem i to działa na mnie. Nic więcej nie jest wymagane.

Sai
źródło

1

Fajnie, trochę to poprawiłem (używając warunkowego komentarza do wykrywania IE) i dodałem kilka komentarzy, działa świetnie i nie ma jQuery ani innych bibliotek. Zobacz tutaj: jsbin.com/ubahe5/edit - plz EDYTUJ swoją odpowiedź, że CHCĘ CI DAĆ +1, ale nie mogę, ponieważ wcześniej głosowałem źle.

Marco Demaio,

Answer 13

1

Fajnie, trochę to poprawiłem (używając warunkowego komentarza do wykrywania IE) i dodałem kilka komentarzy, działa świetnie i nie ma jQuery ani innych bibliotek. Zobacz tutaj: jsbin.com/ubahe5/edit - plz EDYTUJ swoją odpowiedź, że CHCĘ CI DAĆ +1, ale nie mogę, ponieważ wcześniej głosowałem źle.

Marco Demaio,

Answer 14

Użyłem następującego rozwiązania i wydaje się, że działa dobrze w większości sytuacji.

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

Uwaga: $ .browser.msie wymaga jquery.

Answer 15

Dla każdego, kto czuje się senny, który powinien być onmousedown nie onmousdown - zajęło mi kilka chwil, aby zobaczyć problemu

shearichard

Answer 16

@Thad, musisz również dodać procedurę obsługi zdarzenia rozmycia

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

Jednak spowoduje to rozszerzenie pola wyboru po kliknięciu, a nie tylko elementy. (i wydaje się, że zawodzi w IE6, ale działa doskonale w Chrome i IE7)

Answer 17

5

W IE6 / IE7 / IE8 nie da się tego zrobić. Sterowanie jest rysowane przez aplikację, a IE po prostu nie rysuje tego w ten sposób. Najlepszym rozwiązaniem jest zaimplementowanie własnej listy rozwijanej za pomocą prostego HTML / CSS / JavaScript, jeśli tak ważne jest, aby lista rozwijana miała jedną szerokość, a lista inną szerokość.

Robert C. Barth
źródło

rozwiązaniem jest: użyj javascript i css, aby automatycznie dostosować szerokość po najechaniu myszą (i innych zdarzeniach klawiatury ...). przeczytaj tutaj: css-tricks.com/select-cuts-off-options-in-ie-fix najlepsze rozwiązanie (mniej inwazyjne)

tuffo19

Answer 18

rozwiązaniem jest: użyj javascript i css, aby automatycznie dostosować szerokość po najechaniu myszą (i innych zdarzeniach klawiatury ...). przeczytaj tutaj: css-tricks.com/select-cuts-off-options-in-ie-fix najlepsze rozwiązanie (mniej inwazyjne)

tuffo19

Answer 19

Jeśli używasz jQuery, wypróbuj tę wtyczkę IE Select width:

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

Zastosowanie tej wtyczki sprawia, że pole wyboru w przeglądarce Internet Explorer wydaje się działać tak, jak działałoby w przeglądarce Firefox, Opera itp., Umożliwiając otwieranie elementów opcji z pełną szerokością bez utraty wyglądu i stylu o stałej szerokości. Dodaje również obsługę wypełniania i obramowań w polu wyboru w programie Internet Explorer 6 i 7.

Answer 20

W jQuery działa to całkiem dobrze. Załóżmy, że menu ma 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");
    }
    });

});

Answer 21

Oto najprostsze rozwiązanie.

Zanim zacznę, muszę powiedzieć, że pole wyboru rozwijane automatycznie rozwinie się w prawie wszystkich przeglądarkach z wyjątkiem IE6. Zrobiłbym więc sprawdzenie przeglądarki (tj. IE6) i napisałbym tylko do tej przeglądarki. Oto jest. Najpierw sprawdź przeglądarkę.

Kod w magiczny sposób rozszerzy rozwijane pole wyboru. Jedynym problemem związanym z rozwiązaniem jest to, że po najechaniu myszą lista rozwijana zostanie rozwinięta do 420 pikseli, a ponieważ przepełnienie = ukryte, ukrywamy rozmiar rozwiniętego menu rozwijanego i wyświetlamy go jako 170px; tak więc strzałka po prawej stronie ddl będzie ukryta i niewidoczna. ale pole wyboru zostanie rozszerzone do 420px; czego naprawdę chcemy. Po prostu wypróbuj poniższy kod i użyj go, jeśli chcesz.

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

Powyższe to IE6 CSS. Wspólny kod CSS dla wszystkich innych przeglądarek powinien wyglądać jak poniżej.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}

Answer 22

jeśli chcesz mieć proste menu rozwijane i / lub wysuwane bez efektów przejścia, po prostu użyj CSS ... możesz zmusić IE6 do obsługi: najedź na cały element za pomocą pliku .htc (css3hover?) z zachowaniem (tylko właściwość IE6) zdefiniowanym w dołączony warunkowo plik CSS.

Answer 23

sprawdź to .. nie jest doskonały, ale działa i jest przeznaczony tylko dla IE i nie wpływa na FF. Użyłem zwykłego javascript dla onmousedown, aby ustalić tylko poprawkę dla IE .. ale msie z jquery może być również użyty w onmousedown .. głównym pomysłem jest "zmiana" i rozmycie, aby pole wyboru powróciło do normalnego .. , zdecyduj, że masz dla nich własną szerokość. Potrzebowałem 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"

Answer 24

Powyższa odpowiedź BalusC działa świetnie, ale jest mała poprawka, którą dodałbym, jeśli zawartość twojego menu rozwijanego ma mniejszą szerokość niż ta, którą zdefiniujesz w swoim CSS select. Rozwiń, dodaj to do wiązania myszy:

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})

Answer 25

To jest coś, co zrobiłem, biorąc fragmenty z rzeczy innych ludzi.

        $(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' });
            });

        }
    });

gdzie cboEthnicity i cboDisability to listy rozwijane z tekstem opcji szerszym niż szerokość samego zaznaczenia.

Jak widać, wskazałem document.all, ponieważ działa to tylko w IE. Ponadto umieściłem listy rozwijane w elementach div w następujący sposób:

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

Dba to o to, aby inne elementy przemieszczały się z miejsca, gdy rozwijane jest menu. Jedynym minusem jest to, że wizualizacja menulisty znika podczas wybierania, ale powraca zaraz po wybraniu.

Mam nadzieję, że to komuś pomoże.

Answer 26

2

to najlepszy sposób na zrobienie tego:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

to dokładnie to samo, co rozwiązanie BalusC. Tylko to jest łatwiejsze. ;)

mcmwhfy
źródło

Ponownie przetestowałem twój css i działa w Chrome i trochę w Firefoksie, ale nie w IE8. (Może moja IE8 jest inną wersją?) Od tego czasu wymyśliłem własne rozwiązanie oparte na js. Zobacz tahirhassan.blogspot.co.uk/2013/02/…

Tahir Hassan,

Grając trochę w IE8 z tym i poprawką później pomogło. Musiałem tylko ustawić rodzica <td> na stałą szerokość, zmienić położenie górnej wartości i ¡ahí estuvo !. Dzięki

j4v1

Answer 27

Ponownie przetestowałem twój css i działa w Chrome i trochę w Firefoksie, ale nie w IE8. (Może moja IE8 jest inną wersją?) Od tego czasu wymyśliłem własne rozwiązanie oparte na js. Zobacz tahirhassan.blogspot.co.uk/2013/02/…

Tahir Hassan,

Answer 28

Grając trochę w IE8 z tym i poprawką później pomogło. Musiałem tylko ustawić rodzica <td> na stałą szerokość, zmienić położenie górnej wartości i ¡ahí estuvo !. Dzięki

j4v1

Answer 29

Dostępna jest pełnoprawna wtyczka jQuery. Obsługuje niezłamujący układ i interakcje z klawiaturą, sprawdź stronę demonstracyjną: http://powerkiki.github.com/ie_expand_select_width/

zastrzeżenie: zakodowałem to, poprawki mile widziane

Answer 30

1

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

Ybbest
źródło

Answer 31

Rozwiązanie jQuery BalusC poprawione przeze mnie. Wykorzystano także: komentarz Brada Robertsona tutaj .

Po prostu umieść to w .js, użyj szerokiej klasy dla swoich pożądanych kombinacji i nie próbuj nadawać mu identyfikatora. Wywołaj funkcję w onload (lub documentReady lub cokolwiek).
To takie proste :)
Użyje szerokości, którą zdefiniowałeś dla kombinacji jako minimalna długość.

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

Answer 32

Możesz dodać styl bezpośrednio do wybranego elementu:

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

Więc ten wybrany element będzie miał szerokość 200 pikseli.

Alternatywnie możesz zastosować klasę lub identyfikator do elementu i odwołać się do niego w arkuszu stylów

Answer 33

Jak dotąd nie ma. Nie wiem o IE8, ale nie można tego zrobić w IE6 i IE7, chyba że zaimplementujesz własną funkcjonalność listy rozwijanej w javascript. Istnieją przykłady, jak to zrobić w Internecie, chociaż nie widzę wiele korzyści z powielania istniejących funkcji.

Answer 34

Mamy to samo na asp: lista rozwijana:

W przeglądarce Firefox (3.0.5) lista rozwijana to szerokość najdłuższego elementu na liście, która ma szerokość 600 pikseli lub coś podobnego.

Answer 35

Wydaje się, że działa to z IE6 i nie przeszkadza innym. Inną fajną rzeczą jest to, że zmienia menu automatycznie, gdy tylko zmienisz listę rozwijaną.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});

Answer 36

Link hedgerwow (obejście animacji YUI) w pierwszej najlepszej odpowiedzi jest uszkodzony, domena wygasła. Skopiowałem kod, zanim wygasł, więc możesz go znaleźć tutaj (właściciel kodu może dać mi znać, jeśli naruszam jakiekolwiek prawa autorskie, przesyłając go ponownie)

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

W tym samym poście na blogu napisałem o tworzeniu dokładnie tego samego elementu SELECT, co normalny za pomocą menu przycisku YUI. Spójrz i daj mi znać, jeśli to pomoże!

Answer 37

Opierając się na rozwiązaniu opublikowanym przez Sai , oto jak to zrobić z 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:''}); });
});

Answer 38

Myślałem, że rzucę kapelusz na ring. Tworzę aplikację SaaS i mam menu wyboru osadzone w tabeli. Ta metoda zadziałała, ale wypaczyła wszystko w tabeli.

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

Więc co zrobiłem, aby wszystko było lepsze, wrzuciłem zaznaczenie do elementu div indeksowanego 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>

Answer 39

Musiałem obejść ten problem i raz wymyśliłem całkiem kompletne i skalowalne rozwiązanie działające dla IE6, 7 i 8 (i oczywiście kompatybilne z innymi przeglądarkami). Napisałem o tym cały artykuł tutaj: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

Pomyślałem, że podzielę się tym z osobami, które nadal mają ten problem, ponieważ żadne z powyższych rozwiązań nie działa w każdym przypadku (moim zdaniem).

Answer 40

Wypróbowałem wszystkie te rozwiązania i żadne nie działało całkowicie dla mnie. Oto, co wymyśliłem

$(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);

Pamiętaj, aby dodać klasę rozwijaną do każdego menu rozwijanego w html

Sztuczka polega na użyciu wyspecjalizowanej funkcji kliknięcia (znalazłem ją tutaj Zdarzenie Fire za każdym razem, gdy element DropDownList jest wybierany za pomocą jQuery ). Wiele innych rozwiązań tutaj korzysta ze zmiany obsługi zdarzeń, która działa dobrze, ale nie zostanie wyzwolona, jeśli użytkownik wybierze tę samą opcję, która została wcześniej wybrana.

Podobnie jak w przypadku wielu innych rozwiązań, fokus i wyciszenie kursora są używane, gdy użytkownik ustawia fokus na rozwijanym menu, a rozmycie - gdy kliknie.

Możesz również chcieć zastosować w tym celu jakiś rodzaj wykrywania przeglądarki, aby działał tylko np. Nie wygląda to jednak źle w innych przeglądarkach

Answer 41

Jest testowany we wszystkich wersjach IE, Chrome, FF i Safari

Kod JavaScript:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

Kod 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>

Szerokość listy rozwijanej w IE

Odpowiedzi: