В IE випадаючий список займає ту ж ширину, що і спадний ящик (сподіваюся, я маю сенс), тоді як у Firefox ширина випадаючого списку змінюється залежно від вмісту.
Це, в основному, означає, що я повинен переконатися, що будка є достатньо широкою, щоб відобразити найдовший вибір. Це робить мою сторінку дуже потворною :(
Чи є вирішення цієї проблеми? Як я можу використовувати CSS для встановлення різної ширини для dropbox та спадного списку?
Відповіді:
Ось ще один приклад на основі jQuery . На відміну від усіх інших опублікованих тут відповідей, він враховує всі події клавіатури та миші, особливо кліки:
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'); });
}
Використовуйте його в поєднанні з цим фрагментом CSS:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}Все, що вам потрібно зробити, це додати клас wideдо відповідних випадаючих елементів.
<select class="wide">
...
</select>Ось приклад jsfiddle . Сподіваюся, це допомагає.
width: auto !important;
Створення власного випадаючого списку - це більша справа, ніж це варте. Ви можете використовувати деякий JavaScript, щоб змусити IE працювати.
Він використовує трохи бібліотеки YUI та спеціальне розширення для виправлення полів вибору IE.
Вам потрібно буде включити наступне та обернути ваші <select>елементи у<span class="select-box">
Розмістіть їх перед тегом body на вашій сторінці:
<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>Редагування прийняття публікації:
Ви також можете зробити це без бібліотеки YUI та контролю Hack. Все, що вам дійсно потрібно зробити, це встановити onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (або що завгодно) на виділений елемент. Елемент управління YUI надає йому таку приємну анімацію, але це не потрібно. Це завдання також можна виконати за допомогою jquery та інших бібліотек (хоча я не знайшов явної документації для цього)
- поправка до редагування:
IE має проблему з наведенням миші для елементів керування вибору (він не враховує наведення миші на параметри як наведення миші на виділення). Це робить використання миші дуже складним. Перше рішення - найкраще, що я знайшов на сьогодні.
ви можете просто спробувати наступне ...
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=''"Я спробував, і це працює для мене. Більше нічого не потрібно.
Я використав наступне рішення, і воно, здається, добре працює в більшості ситуацій.
<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>Примітка: $ .browser.msie вимагає jquery.
@Тепер вам потрібно додати обробник подій розмиття
$(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");
}
});
});Однак це все одно розширить поле вибору при натисканні, а не лише елементи. (і, здається, не вдається в IE6, але чудово працює в Chrome і IE7)
Це неможливо зробити в IE6 / IE7 / IE8. Елемент управління залучається додатком, і IE просто не малює його таким чином. Найкраще поставити власний випадаючий список за допомогою простих HTML / CSS / JavaScript, якщо так важливо, щоб випадаюче меню було однієї ширини, а список іншої ширини.
Якщо ви використовуєте jQuery, спробуйте цей плагін IE select width:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
Застосовуючи цей плагін, поле для вибору в Internet Explorer, здається, працює так само, як і у Firefox, Opera тощо, дозволяючи елементам опцій відкриватися на всю ширину, не втрачаючи зовнішнього вигляду та стилю фіксованої ширини. Він також додає підтримку заповнення та меж у полі вибору в Internet Explorer 6 та 7.
У jQuery це працює досить добре. Припустимо, що випадаюче меню має 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");
}
});
});Ось найпростіше рішення.
Перш ніж почати, я повинен сказати вам, що випадаюче поле вибору автоматично розшириться майже у всіх браузерах, крім IE6. Отже, я б перевірив браузер (тобто IE6) і написав наступне лише для цього браузера. Ось воно йде. Спочатку перевірте наявність браузера.
Код чарівно розширює поле вибору, що випадає. Єдина проблема з рішенням полягає в тому, що миша, над випадаючим списком, буде розширена до 420 пікселів, і оскільки переповнення = приховане, ми приховуємо розширений розмір випадаючого списку та відображаємо його як 170 пікселів; отже, стрілка праворуч від ddl буде прихована і не буде видно. але поле вибору буде розширено до 420 пікселів; чого ми справді хочемо. Просто спробуйте наведений нижче код і використовуйте його, якщо вам подобається.
.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>Вище наведено IE6 CSS. Загальний CSS для всіх інших браузерів повинен бути таким, як показано нижче.
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}якщо вам потрібне просте випадаюче меню та / або меню вильоту без ефектів переходу, просто використовуйте CSS ... ви можете змусити IE6 підтримувати: наведення курсора на весь елемент, використовуючи файл .htc (css3hover?) з поведінкою (властивість лише IE6), визначена в умовно прикріплений файл CSS.
перевірте це .. це не ідеально, але це працює, і це лише для IE і не впливає на FF. Я використовував звичайний javascript для onmousedown, щоб встановити виправлення лише IE .. але msie з jquery міг бути використаний також і в onmousedown .. основна ідея - "onchange" і на blur, щоб поле вибору повернулося до нормального стану .. вирішити, що ти власна ширина для тих. Мені потрібно було 35%.
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"Відповідь BalusC чудово працює, але є невелике виправлення, яке я б додав, якщо вміст вашого випадаючого списку має меншу ширину, ніж те, що ви визначаєте у своєму CSS select.expand, додайте це до прив'язки наведення курсору миші:
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})Це те, що я зробив, беручи шматочки з речей інших людей.
$(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' });
});
}
});де cboEthnicity і cboDisability є випадаючими списками з текстом опцій, ширшим за ширину самого виділення.
Як бачите, я вказав document.all, оскільки це працює лише в IE. Крім того, я розкрив випадаючі списки в елементах div наступним чином:
<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>Це піклується про інші елементи, що зсуваються з місця, коли розкривне меню розширюється. Єдиним недоліком тут є те, що візуальний меню зникає, коли ви вибираєте, але повертається, як тільки ви вибрали.
Сподіваюся, це комусь допомагає.
це найкращий спосіб зробити це:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}це точно так само, як рішення BalusC. Тільки це простіше. ;)
Доступний повноцінний плагін jQuery. Він підтримує незламну розкладку та взаємодію з клавіатурою. Ознайомтесь із демонстраційною сторінкою: http://powerkiki.github.com/ie_expand_select_width/
застереження: я закодував цю штуку, латки вітаються
Я покращив рішення jquery BalusC. Використовується також: коментар Бреда Робертсона тут .
Просто помістіть це в .js, використовуйте широкий клас для бажаних комбо і не підробляйте, щоб надати йому ідентифікатор. Викличте функцію в завантаженні (або documentReady або що завгодно).
Настільки ж просто дупу :)
Він використовуватиме ширину, яку ви визначили для комбінованої мінімальної довжини.
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');
})
}
}Поки що його немає. Не знаю про IE8, але це неможливо зробити в IE6 та IE7, якщо ви не реалізуєте власну функцію випадаючого списку за допомогою JavaScript. Є приклади, як це зробити в Інтернеті, хоча я не бачу великої вигоди у дублюванні існуючих функціональних можливостей.
У нас те саме на asp: dropdownlist:
У Firefox (3.0.5) випадаючий список - це ширина найдовшого елемента у випадаючому меню, яка становить приблизно 600 пікселів у ширину або щось подібне.
Здається, це працює з IE6 і, здається, не порушує інших. Інша приємна річ полягає в тому, що він автоматично змінює меню, як тільки ви змінюєте свій випадаючий вибір.
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});Посилання hedgerwow (опрацювання анімації YUI) у першій найкращій відповіді порушено, я думаю, термін дії домену закінчився. Я скопіював код до закінчення терміну його дії, тому ви можете знайти його тут (власник коду може повідомити мене, якщо я порушую якісь авторські права, завантаживши його знову)
У тому ж дописі в блозі я писав про те, щоб створити такий самий елемент SELECT, як звичайний, за допомогою меню кнопки YUI. Погляньте і дайте мені знати, якщо це допоможе!
На основі рішення, опублікованого Sai , ось як це зробити за допомогою 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:''}); });
});Думав кинути шапку в ринг. Я роблю програму SaaS, і в мене було вбудоване меню вибору всередині таблиці. Цей метод спрацював, але змістив усе в таблиці.
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';}"Тож, що я зробив, щоб покращити все це, - це перекинути select у z-індексований 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>Мені довелося обійти цю проблему, і одного разу я придумав досить повне та масштабоване рішення, яке працює для IE6, 7 та 8 (і, очевидно, сумісне з іншими браузерами). Я написав цілу статтю про це прямо тут: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer
Думаю, я поділюсь цим для людей, які все ще стикаються з цією проблемою, оскільки жодне з наведених вище рішень не працює в кожному випадку (на мій погляд).
Я спробував усі ці рішення, і жодне не працювало повністю для мене. Це те, що я придумав
$(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
Хитрість тут полягає у використанні спеціалізованої функції натискання (я знайшов її тут Пожежна подія кожного разу, коли за допомогою jQuery вибирається елемент DropDownList ). Багато інших рішень тут використовують зміну обробника подій, яка працює добре, але не спрацьовує, якщо користувач вибирає ту саму опцію, яку було вибрано раніше.
Як і багато інших рішень, фокус і миша - це для того, коли користувач ставить спадне меню у фокусі, розмиття - для того, коли вони клацають.
Можливо, ви також захочете застосувати в цьому якийсь спосіб виявлення браузера, щоб він лише впливав, тобто. Однак це не виглядає погано в інших браузерах
Його перевірено у всіх версіях IE, Chrome, FF та Safari
Код JavaScript:
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->Код 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>