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

Ответ 1

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

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

(Вам нужно установить свойство position, если selectbox является дочерним элементом контейнера с фиксированной шириной.)

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

Ответ 2

Я сделал 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"));

           });
        }
      });
    }
    }

Ответ 3

Вот немного script, которое должно помочь вам:

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

Ответ 4

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

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

Это покажет текст прерывания в форме подсказки при зависании <option> , независимо от ширины <select> .

Работает для IE7 +.

Ответ 5

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

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

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

});

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

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

}); 

Ответ 6

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

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

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

Ответ 7

Небольшое, но, надеюсь, полезное обновление кода от 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"));
      });
  }
}

Ответ 8

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

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

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

Ответ 9

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

• вместо выбора сделать это поле редактирования, отключено, поэтому никто не может ввести что-либо вручную или изменить содержимое после выбора
• другое скрытое редактирование, содержащее идентификатор выбранного параметра (поясняется ниже)
• сделайте кнопку [..] и script, чтобы показать, что div ниже
• сделать скрытый div с абсолютной позицией под или рядом с полем редактирования
• сделайте, чтобы div содержал выбор с размером стиля = "6" (чтобы показать 6 опций и полосу прокрутки, а не раскрывающийся список) и кнопку "выбрать" и, возможно, "отменить"
• Не устанавливайте ширину шрифта, так что все это займет ширину самого широкого варианта или кнопки плюс, возможно, какое-то дополнение по вашему выбору.
• script кнопка "выбрать", чтобы скопировать идентификатор выбранной опции в скрытое поле редактирования, а значение - на видимое, а также снова скрыть div.

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

Ответ 10

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

Ответ 11

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

}

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

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

Ответ 12

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

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

Ответ 13

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

Сначала убедитесь, что мы передаем только нашу функцию в IE8:

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

Затем, чтобы разрешить выбор для расширения за пределами области содержимого, включите наши выпадающие списки в 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' классу, который будет автоматически расширяться на основе самого длинного текста опции. Затем, чтобы обеспечить постоянную минимальную ширину, которая не уменьшается после значения по умолчанию, мы можем получить текущую ширину списка выбора и установить ее в свойство min-width выпадающего списка в 'onchange' привязка:

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

Ответ 14

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

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

Ответ 15

Улучшено решение jQuery BalusC. Используется также: Brad Robertson комментарий здесь.

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

Ответ 16

Его протестировали во всех версиях 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>

Ответ 17

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

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

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

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

Ответ 18

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

Он устанавливает ширину в 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();
});

Ответ 19

Я хотел, чтобы это работало с выборами, которые я добавил динамически на страницу, поэтому после большого количества экспериментов я в конечном итоге предоставил все варианты, которые я хотел сделать с помощью класса "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.

Ответ 20

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

Я нашел, что это точно так: -

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

Ответ 21

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

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

Ответ 22

Чистое решение 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>

Ответ 23

Лучшее решение: css + javascript

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

var el;

$("select")
  .each(function() {
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  })
  .mouseenter(function(){
    $(this).css("width", "auto");
  })
  .bind("blur change", function(){
    el = $(this);
    el.css("width", el.data("origWidth"));
  });