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?
Odpowiedzi:
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.
width: auto !important;
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.
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.
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.
@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)
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ść.
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.
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");
}
});
});
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.--%>
}
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%'"
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');
}})
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.
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. ;)
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
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');
})
}
}
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.
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.
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");
}
});
});
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)
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!
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:''}); });
});
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>
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).
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
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>