it-swarm.com.ru

Выберите раскрывающийся список с фиксированной шириной IE

Проблема:

Некоторые элементы в выбранном элементе требуют больше, чем указанная ширина 145 пикселей, чтобы отобразить полностью.

Поведение Firefox : нажатие на кнопку выбора открывает раскрывающийся список элементов, настроенный по ширине самого длинного элемента.

поведение IE6 и IE7 : нажатие на кнопку выбора открывает раскрывающийся список элементов, ограниченный шириной 145px, что делает невозможным чтение более длинных элементов.

Текущий пользовательский интерфейс требует, чтобы мы поместили этот выпадающий список в 145 пикселей и поместили в него элементы с более длинными описаниями. 

Любой совет по решению проблемы с IE?

Верхний элемент должен оставаться шириной 145px даже при расширении списка.

Спасибо!

CSS: 

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

Вот выбранный входной код (в настоящее время нет определения для стиля backend_dropbox)

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

Полная HTML-страница, если вы хотите быстро протестировать в браузере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
55
aaandre

Для IE 8 существует простое решение на основе чистого CSS:

select:focus {
    width: auto;
    position: relative;
}

(Вам необходимо установить свойство position, если поле выбора является дочерним для контейнера с фиксированной шириной.)

К сожалению, IE 7 и менее не поддерживают селектор: focus.

29
rusty

Я сделал Google об этой проблеме, но не нашел лучшего решения, поэтому создал решение, которое отлично работает во всех браузерах.

просто вызовите функцию badFixSelectBoxDataWidthIE () при загрузке страницы.

function badFixSelectBoxDataWidthIE(){
    if ($.browser.msie){
      $('select').each(function(){
    if($(this).attr('multiple')== false){
      $(this)
          .mousedown(function(){
               if($(this).css("width") != "auto") {
                   var width = $(this).width();
                   $(this).data("origWidth", $(this).css("width"))
                          .css("width", "auto");
                   /* if the width is now less than before then undo */
                   if($(this).width() < width) {
        $(this).unbind('mousedown');
                       $(this).css("width", $(this).data("origWidth"));
                   }
               }
           })
           /* Handle blur if the user does not change the value */
           .blur(function(){
               $(this).css("width", $(this).data("origWidth"));

           })
           /* Handle change of the user does change the value */
           .change(function(){
               $(this).css("width", $(this).data("origWidth"));

           });
        }
      });
    }
    }
10
Anoop Sharma

Вот небольшой скрипт, который должен вам помочь:

http://www.icant.co.uk/forreview/tamingselect/

7
Zac

Для простого решения, свободного от Javascript, добавления атрибута title к вашим <option>, содержащим текст, может быть достаточно, в зависимости от ваших требований.

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

Это покажет обрезанный текст в виде всплывающей подсказки при наведении <option>, независимо от ширины <select>. 

Работает на IE7 +.

7
islander

Боюсь, не без javascript, но мне удалось сделать его довольно маленьким, используя jQuery

$('#del_select').mouseenter(function () {

    $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

    $(this).css("width","170px");

}); 
3
stukerr

Просто вы можете использовать этот плагин для jquery;) 

http://plugins.jquery.com/project/skinner

$(function(){
          $('.select1').skinner({'width':'200px'});
});
3
anbi

Небольшое, но, надеюсь, полезное обновление кода от MainMa & user558204 (спасибо, ребята), которое удаляет ненужный каждый цикл, сохраняет копию $ (this) в переменной в каждом обработчике событий, так как он используется более одного раза, также объединяет размытие и изменение событий, поскольку они выполняли одно и то же действие.

Да, он все еще не идеален, так как изменяет размер элемента select, а не только выпадающих опций. Но, эй, это выбило меня из колеи, мне (очень, очень, к сожалению) все еще приходится поддерживать IE6-доминирующую базу пользователей по всему бизнесу.

// IE test from from: https://Gist.github.com/527683
var ie = (function () {
  var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
  );
  return v > 4 ? v : undef;
} ());


function badFixSelectBoxDataWidthIE() {
  if (ie < 9) {
    $('select').not('[multiple]')
      .mousedown(function() {
        var t = $(this);
        if (t.css("width") != "auto") {
          var width = t.width();
          t.data("ow", t.css("width")).css("width", "auto");

          // If the width is now less than before then undo
          if (t.width() < width) {
            t.unbind('mousedown');
            t.css("width", t.data("ow"));
          }
        }
      })

      //blur or change if the user does change the value
      .bind('blur change', function() {
        var t = $(this);
        t.css("width", t.data("ow"));
      });
  }
}
2
TechSpud

Зачем кому-то хотеть навести курсор мыши на событие в выпадающем списке? Вот способ манипулирования IE8 для способа работы выпадающего списка:

Во-первых, давайте удостоверимся, что мы только передаем нашу функцию в IE8:

    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
       //fix me code
    }

Затем, чтобы позволить расширению select выйти за пределы области содержимого, давайте обернем наши выпадающие списки в div с правильной структурой, если это еще не сделано, а затем вызовем вспомогательную функцию:

        var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
        $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');

        //helper function for fix
        ddlFix();
    }

Теперь о событиях. Поскольку IE8 генерирует событие после фокусировки по любой причине, IE закроет виджет после рендеринга при попытке расширения. Обходной путь будет заключаться в привязке к 'focusin' и 'focusout' классу, который будет автоматически расширяться на основе самого длинного текста опции. Затем, чтобы обеспечить постоянную минимальную ширину, которая не сжимается после значения по умолчанию, мы можем получить текущую ширину списка выбора и установить для нее свойство минимальной ширины выпадающего списка в 'onchange' binding :

    function ddlFix() {
    var minWidth;

    $('select')

    .each(function () {
        minWidth = $(this).width();
        $(this).css('min-width', minWidth);
    })
    .bind('focusin', function () {
        $(this).addClass('expand');
    })
    .change(function () {
        $(this).css('width', minWidth);
    })
    .bind('focusout', function () {
        $(this).removeClass('expand');
    });
}

Наконец, не забудьте добавить этот класс в таблицу стилей:

 select:focus, select.expand {
    width: auto;
}
1
Ben Sewards

Полноценный плагин jQuery доступен, проверьте демонстрационную страницу: http://powerkiki.github.com/ie_expand_select_width/

отказ от ответственности: я кодировал эту вещь, патчи приветствуются

1
PowerKiKi
for (i=1;i<=5;i++){
   idname = "Usert" + i;
   document.getElementById(idname).style.width = "100%";

}

Я использовал этот способ, чтобы показать выпадающий список, когда ширина отображается неправильно.

Это работает для IE6, Firefox и Chrome.

1
keong

подобное решение можно найти здесь, используя jquery, чтобы установить автоматическую ширину, когда фокус (или указатель мыши), и вернуть ширину оригинала, если размытие (или отпуск мышью) http://css-tricks.com/select-cuts-off-options -in-ie-fix/

1
schrodinger's code

Другой подход:

  1. вместо выбора сделать его окном редактирования, отключено, поэтому никто не может вводить что-либо вручную или изменять содержимое после выбора
  2. другое скрытое редактирование, содержащее идентификатор выбранной опции (объяснено ниже)
  3. сделать кнопку [..] и написать скрипт, чтобы показать, что div ниже
  4. сделать скрытый div с абсолютной позицией под или около поля редактирования
  5. сделайте, чтобы этот div содержал выбор с style size = "6" (чтобы показать 6 опций и полосу прокрутки, а не выпадающий список) и кнопку "выбрать" и, возможно, "отменить"
  6. Не задавайте ширину, поэтому все будет принимать ширину самого широкого параметра или кнопки плюс, возможно, некоторые отступы на ваш выбор
  7. сценарий кнопки «Выбрать» для копирования идентификатора выбранной опции в скрытое поле редактирования и его значения в видимую, а также, чтобы снова скрыть div.

Всего 4 простые команды javascript.

1
Kitet

Я нашел довольно простое решение для этого. В элемент <select> html добавьте следующие свойства:

onmouseover="autoWidth(this)" 
onblur="resetWidth(this)" 

Таким образом, всякий раз, когда пользователь нажимает на эту ширину, она автоматически расширяется, и пользователь выходит из поля выбора, ширина будет сброшена на исходную.

1
TheOnlyOne

Для моего макета я не хотел взломать (без увеличения ширины, без нажатия кнопки с авто, а затем переход к оригиналу). Это сломало мой существующий макет. Я просто хотел, чтобы он работал как другие браузеры. 

Я обнаружил, что это точно так:

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html

0
Steve

У меня есть еще один вклад в это. Я написал это некоторое время назад, что вы можете найти полезным: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

Это плагин jquery для создания неупорядоченного списка с поддержкой скрытых элементов select.

Источник находится на github: https://github.com/tncbbthositg/GiantDropdown

Вы сможете обрабатывать поведения и стили на UL, которые вы не можете с помощью SELECT. Все остальное должно быть таким же, потому что список выбора все еще там, он просто скрыт, но UL будет использовать его в качестве резервного хранилища данных (если хотите).

0
D. Patrick

Обходной путь, если вас не волнует странное представление после выбора параметра (т. Е. Выберите, чтобы перейти на новую страницу):

<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
  <select onchange='jump();'>
    <!-- '&#9660;(▼)' produces a fake dropdown indicator -->
    <option value=''>Jump to ... &#9660;</option>
    <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
    ...
  </select>
</div>
0
Mergen Wu

Вот решение, которое действительно работает. 

Он устанавливает ширину в IE и не портит макет вашей страницы, а также не закрывает раскрывающийся список, когда вы наводите курсор мыши на параметры выбора, как и некоторые другие решения на этой странице. 

Однако вам нужно будет изменить значения margin-right и значения ширины, чтобы они соответствовали вашим полям выбора. 

Также вы можете заменить $('select') на $('#Your_Select_ID_HERE'), чтобы повлиять только на определенное поле выбора. Также вам нужно будет вызвать функцию fixIESelect() в теле onload или через jQuery, используя DOM ready, как я делал в своем коде ниже:

//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
{
 if ($.browser.msie)
 {
  $('select').mouseenter(function ()
  {
   $(this).css("width","auto");
   $(this).css("margin-right","-100");
  });
  $('select').bind('click focus',function ()
  {
   window.fixIESelect_clickset = true;
  });
  $('select').mouseout(function ()
  {
   if(window.fixIESelect_clickset != true)
   {
    $(this).css("width","93px");
    window.fixIESelect_clickset = false;
   }
  });
  $('select').bind('blur change',function ()
  {
   $(this).css("width","93px");
  });
 }
}
/////////////
// ONLOAD //
////////////
$(document).ready(function()
{
 fixIESelect();
});
0
Gallagher

Чистое решение CSS: http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }
<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

0
Teenage

Я хотел, чтобы это работало с выборками, которые я динамически добавил на страницу, поэтому после долгих экспериментов я в итоге дал все выборки, которые я хотел сделать, с классом «fixedwidth», а затем добавил следующий CSS:

table#System_table select.fixedwidth { width: 10em; }
table#System_table select.fixedwidth.clicked { width: auto; }

и этот код

<!--[if lt IE 9]>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(document).on(
              {
                'mouseenter': function(event) {
                    jQuery(this).addClass('clicked');
                    },
                'focusout change blur': function() {
                    jQuery(this).removeClass('clicked');
                    }
              }, 'select.fixedwidth');
        });
    </script>
<![endif]-->

Несколько вещей, чтобы отметить:

  • Несмотря на то, что все мои выборки находятся в таблице, мне пришлось выполнить «on» для jQuery(document).on вместо jQuery('table#System_table').on
  • Несмотря на то, что в документации jQuery сказано использовать «mouseleave» вместо «blur», я обнаружил, что в IE7, когда я перемещал мышь вниз по раскрывающемуся списку, он получал событие mouseleave, но не blur.
0
Paul Tomblin

Решение jquery BalusC's улучшено мной. Используется также: Брэд Робертсон комментарий здесь .

Просто поместите это в .js, используйте широкий класс для ваших желаемых комбинаций и не пытайтесь присвоить ему идентификатор. Вызовите функцию в onload (или 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');
    })
    }
}
0
Federico Valido

Испытано во всех версиях IE, Chrome, FF и Safari.

// код JavaScript

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

// Html code

    <select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
      <option value="0" selected="selected" readonly="readonly">Select</option>
    <option value="1" >Apple</option>
    <option value="2" >Orange + Banana + Grapes</option>
0
Arif

Не javascript бесплатно, я тоже боюсь, и для моего решения требуется библиотека js, однако вы можете использовать только те файлы, которые вам нужны, а не использовать их все, возможно, лучше всего подходит для тех, кто уже использует YUI для своих проектов или решает, какие один для использования. Посмотрите на: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

В моем блоге также обсуждаются и другие решения, на одно из которых мы ссылаемся здесь на stackoverflow, поэтому я вернулся к созданию своего собственного элемента SELECT по простой причине: мне не нравятся события mouseover expand. Может быть, если это поможет кому-то еще!

0
Hammad Tariq