IE'de, açılır liste dropbox ile aynı genişliği alır (umarım mantıklıdır), oysa Firefox'ta açılır listenin genişliği içeriğe göre değişir.
Bu temelde, dropbox'ın mümkün olan en uzun seçimi gösterecek kadar geniş olduğundan emin olmam gerektiği anlamına geliyor. Bu, sayfamın çok çirkin görünmesine neden oluyor :(
Bu sorun için herhangi bir çözüm var mı? Dropbox ve açılır liste için farklı genişlikler ayarlamak üzere CSS'yi nasıl kullanabilirim?
Yanıtlar:
İşte jQuery tabanlı başka bir örnek. Burada yayınlanan diğer tüm yanıtların aksine, tüm klavye ve fare olaylarını, özellikle de tıklamaları hesaba katar:
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'); });
}
Bunu şu CSS parçasıyla birlikte kullanın:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
Tek yapmanız gereken, sınıfı widesöz konusu açılır listeye / öğelere eklemektir .
<select class="wide">
...
</select>
İşte bir jsfiddle örneği . Bu yardımcı olur umarım.
width: auto !important;
Kendi açılır listenizi oluşturmak, değerinden çok acı çekicidir. IE açılır menüsünün çalışması için biraz JavaScript kullanabilirsiniz.
Bir miktar YUI kitaplığı ve IE seçim kutularını düzeltmek için özel bir uzantı kullanır.
Aşağıdakileri eklemeniz ve <select>öğelerinizi bir<span class="select-box">
Bunları sayfanızın gövde etiketinin önüne yerleştirin:
<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>
Kabul sonrası düzenleme:
Bunu YUI kitaplığı ve Hack kontrolü olmadan da yapabilirsiniz. Gerçekten yapmanız gereken tek şey, select öğesinin üzerine bir onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (veya ne isterseniz) koymaktır. YUI kontrolü ona o güzel animasyonu veriyor ama gerekli değil. Bu görev, jquery ve diğer kitaplıklar ile de gerçekleştirilebilir (bununla birlikte, bunun için açık bir belge bulamadım)
- düzenlemede değişiklik:
IE, seçili kontroller için fareyle üzerine gelme sorunu yaşıyor (seçenekler üzerinde fareyle üzerine gelme seçeneğinin üzerine gelindiğini düşünmüyor). Bu, mouseout kullanmayı çok zorlaştırır. İlk çözüm, şimdiye kadar bulduğum en iyisidir.
sadece aşağıdakileri deneyebilirsiniz ...
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=''"
Denedim ve benim için çalışıyor. Başka hiçbir şeye gerek yoktur.
Aşağıdaki çözümü kullandım ve çoğu durumda iyi çalışıyor gibi görünüyor.
<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>
Not: $ .browser.msie jquery gerektirir.
@Bir bulanıklık olay işleyicisi de eklemeniz gerekti
$(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");
}
});
});
Ancak, bu, yalnızca öğeler yerine, tıklamayla seçim kutusunu yine de genişletecektir. (ve IE6'da başarısız görünüyor, ancak Chrome ve IE7'de mükemmel çalışıyor)
IE6 / IE7 / IE8'de bunu yapmanın bir yolu yoktur. Kontrol, uygulama tarafından çizilir ve IE onu bu şekilde çizmez. En iyi bahsiniz, açılır menünün bir genişliğe ve listenin başka bir genişliğe sahip olması önemliyse, basit HTML / CSS / JavaScript aracılığıyla kendi açılır listenizi uygulamaktır.
JQuery kullanıyorsanız, bu IE genişlik seçme eklentisini deneyin:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Bu eklentinin uygulanması, seçenek öğelerinin sabit genişliğin görünümünü ve stilini kaybetmeden tam genişlikte açılmasına izin vererek Internet Explorer'daki seçme kutusunun Firefox, Opera vb. Gibi çalıştığı gibi görünmesini sağlar. Ayrıca, Internet Explorer 6 ve 7'deki seçim kutusuna dolgu ve kenarlıklar için destek ekler.
JQuery'de bu oldukça iyi çalışıyor. Açılır listenin id = "dropdown" olduğunu varsayın.
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});
İşte en basit çözüm.
Başlamadan önce, açılır seçim kutusunun IE6 hariç neredeyse tüm tarayıcılarda otomatik olarak genişleyeceğini söylemeliyim. Bu yüzden, bir tarayıcı kontrolü yapardım (yani, IE6) ve aşağıdakileri sadece o tarayıcıya yazardım. İşte gidiyor. Önce tarayıcıyı kontrol edin.
Kod, açılır seçim kutusunu sihirli bir şekilde genişletir. Çözümle ilgili tek sorun onmouseover açılır liste 420px'e genişletilecek ve overflow = hidden olduğundan, genişletilmiş açılır menü boyutunu gizleyip 170px olarak gösteriyoruz; bu nedenle, ddl'nin sağ tarafındaki ok gizlenecek ve görülemeyecektir. ancak seçim kutusu 420 piksele genişletilecektir; gerçekten istediğimiz şey bu. Aşağıdaki kodu kendiniz deneyin ve isterseniz kullanın.
.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>
Yukarıdakiler IE6 CSS'dir. Diğer tüm tarayıcılar için ortak CSS aşağıdaki gibi olmalıdır.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}
bunu kontrol edin .. mükemmel değil ama işe yarıyor ve sadece IE için ve FF'yi etkilemiyor. IE'yi yalnızca düzeltmek için onmousedown için normal javascript kullandım .. ancak jquery'den gelen msie, onmousedown'da da kullanılabilirdi .. ana fikir "onchange" ve seçim kutusunun normale dönmesi için bulanıklıktır. . bunlar için kendi genişliğinize karar verin. % 35'e ihtiyacım vardı.
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
BalusC'nin yukarıdaki cevabı harika çalışıyor, ancak açılır listenizin içeriğinin CSS select'inizde tanımladığınızdan daha küçük bir genişliğe sahip olması durumunda ekleyeceğim küçük bir düzeltme var. Genişletin, fareyle üzerine gelme bağlantısına ekleyin:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})
Bu, başkalarının eşyalarından parçalar alarak yaptığım bir şey.
$(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' });
});
}
});
burada cboEthnicity ve cboDisability, seçenek metninin seçimin kendisinin genişliğinden daha geniş olduğu açılır menülerdir.
Gördüğünüz gibi, document.all'ı belirttim, çünkü bu yalnızca IE'de çalışıyor. Ayrıca, div öğelerinin içindeki açılır menüleri şu şekilde kapladım:
<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>
Bu, açılır menünüz genişlediğinde diğer öğelerin yerinden oynamasını sağlar. Buradaki tek dezavantaj, menülist görselinin seçim yaparken kaybolması, ancak seçtiğiniz anda geri dönmesidir.
Umarım bu birine yardımcı olur.
bunu yapmanın en iyi yolu şudur:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}
BalusC çözümü ile tamamen aynı. Sadece bu daha kolay. ;)
Tam teşekküllü bir jQuery eklentisi mevcuttur. Kesintisiz düzeni ve klavye etkileşimlerini destekler, demo sayfasına göz atın: http://powerkiki.github.com/ie_expand_select_width/
feragatname: O şeyi kodladım, yamalar hoş geldiniz
Jquery BalusC'nin çözümü benim tarafımdan geliştirildi. Ayrıca kullanılır: Brad Robertson'un yorumu burada .
Bunu bir .js içine koyun, istediğiniz kombinasyonlar için geniş sınıfı kullanın ve ona bir kimlik vermek için taklit etmeyin. İşlevi onload (veya documentReady veya her neyse) içinde çağırın.
O kadar basit ki :)
Kombo için tanımladığınız genişliği minimum uzunluk olarak kullanacaktır.
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');
})
}
}
Şimdiye kadar bir tane yok. IE8 hakkında bilmiyorum, ancak kendi açılır liste işlevinizi javascript ile uygulamadığınız sürece IE6 ve IE7'de yapılamaz. Web'de nasıl yapılacağına dair örnekler var, ancak mevcut işlevselliği kopyalamakta pek bir fayda görmüyorum.
Bir asp: açılır listesinde de aynı şey var:
Firefox'ta (3.0.5) açılır liste, açılır menüdeki en uzun öğenin genişliğidir ve 600 piksel genişliğinde veya buna benzer bir şeydir.
Bu, IE6 ile çalışıyor gibi görünüyor ve diğerlerini bozuyor gibi görünmüyor. Diğer güzel şey, açılır seçiminizi değiştirir değiştirmez menüyü otomatik olarak değiştirmesidir.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});
İlk en iyi cevaptaki hedgerwow bağlantısı (YUI animasyon çalışması) bozuldu, sanırım etki alanının süresi doldu. Kodu süresi dolmadan kopyaladım, böylece burada bulabilirsin (kodun sahibi, herhangi bir telif hakkını tekrar yükleyerek ihlal edersem bana haber verebilir)
Aynı blog yazısında YUI Button menüsünü kullanarak normal olanla tamamen aynı bir SELECT öğesi yapmak hakkında yazdım. Bir göz atın ve bunun yardımcı olup olmadığını bana bildirin!
Sai tarafından yayınlanan çözüme dayanarak, jQuery ile bu nasıl yapılır.
$(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:''}); });
});
Ringe şapkamı atayım dedim. Bir SaaS uygulaması yapıyorum ve bir tablonun içine gömülü bir seçme menüm vardı. Bu yöntem işe yaradı, ancak tablodaki her şeyi çarpıttı.
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';}"
Her şeyi daha iyi hale getirmek için yaptığım şey, seçimi z dizinli bir div içine atmaktı.
<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>
Bu sorunu çözmek zorunda kaldım ve bir keresinde IE6, 7 ve 8 için çalışan (ve tabii ki diğer tarayıcılarla uyumlu) oldukça eksiksiz ve ölçeklenebilir bir çözüm buldum. Tam burada bununla ilgili bir makale yazdım: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Yukarıdaki çözümlerden hiçbiri her durumda işe yaramadığı için bunu hala bu sorunla karşılaşan insanlar için paylaşacağımı düşündüm (bence).
Tüm bu çözümleri denedim ve hiçbiri benim için tamamen işe yaramadı. Bu benim bulduğum şey
$(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);
Html'nizdeki her açılır menüye bir açılır sınıf eklediğinizden emin olun.
Buradaki hile, özelleştirilmiş tıklama işlevini kullanmaktır (burada buldum Fire olayı jQuery ile bir DropDownList öğesi her seçildiğinde ). Buradaki diğer çözümlerin çoğu olay işleyicisi değişikliğini kullanır, bu iyi çalışır ancak kullanıcı daha önce seçilenle aynı seçeneği seçerse tetiklenmez.
Diğer çözümlerin birçoğu gibi, odaklanma ve fareyi düşürme, kullanıcının açılır menüye odaklandığı zaman içindir; bulanıklık, tıkladığı zaman içindir.
Ayrıca buna bir tür tarayıcı algılaması yapıştırmak isteyebilirsiniz, böylece yalnızca örn. Yine de diğer tarayıcılarda kötü görünmüyor
IE, Chrome, FF ve Safari'nin tüm sürümlerinde test edildi
JavaScript kodu:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
HTML Kodu:
<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>