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

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

54 голосов
/ 25 марта 2009

выпуск:

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

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

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

Текущий пользовательский интерфейс требует, чтобы мы поместили этот выпадающий список в 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>

Ответы [ 23 ]

1 голос
/ 21 февраля 2011

подобное решение можно найти здесь, используя jquery, чтобы установить автоматическую ширину при фокусировке (или при наведении мыши) и вернуть ширину оригинала при размытии (или при отпускании при помощи мыши) -options-в-т затруднительного / .

1 голос
/ 14 мая 2010

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

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

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

1 голос
/ 30 сентября 2010

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

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

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

0 голосов
/ 10 января 2015

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

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

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

0 голосов
/ 12 июня 2013

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

http://css -tricks.com / выберите обрезки-Офф-варианту-в-т затруднительного / 

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"));
  });
0 голосов
/ 08 сентября 2012

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

Несколько замечаний:

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

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

Он устанавливает ширину в 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 голосов
/ 02 июля 2010

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

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

0 голосов
/ 08 мая 2012

Проверено во всех версиях 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 голосов
/ 05 сентября 2011

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

Просто поместите это в .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');
    })
    }
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...