Как сохранить ширину элемента SELECT маленьким, но ОПЦИИ гибким

Проблема:

Мой выпадающий динамически загружается динамически, имеет некоторые параметры, которые довольно длинные, и это испортит мой макет страницы. Я хотел бы, чтобы размер элемента select был небольшим, но когда он был расширен, разрешите пользователю видеть все длинные options. Для этого я установил width для select на фиксированное значение, например width:200px;

Ожидаемое/желаемое поведение (работает в Chrome)

Фактическое поведение в IE8

Что я пробовал:

select{
    overflow:show;
}
option{
    overflow:show;
    width:1000px;
}

УПРОЩЕННЫЙ FIDDLE:

http://jsfiddle.net/gCbhq/2/

Ответ 1

Ok. Не уверен, что это поможет. Я использую JQuery Mobile, а кнопка select - только значок (= 28px). На IE8 все мои параметры, следовательно, 28px тоже.

Я исправил это следующим образом:

select { min-width: 150px !important; }

но это работает только потому, что Jquery Mobile скрывает выбор и добавляет его собственные элементы "сверху".

Увы, вот исправление - http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Ответ 2

Все, что вы можете сделать, это взломать его, чтобы он выглядел близко. Поведение Chrome нельзя эмулировать, просто добавив/изменив CSS только select.

Это так близко, что вы можете получить без добавления каких-либо других элементов:

http://css-tricks.com/examples/SelectCutoffFix/ (вернитесь к статье наверху для деталей реализации)

Вышеупомянутое решение - лучшее, что вы можете сделать с тем, что вы просите, что не является дополнительными элементами вокруг select.

Если вы хотите добавить div с небольшим стилем вокруг select (без виджета замены или специального интерфейса), вы можете сделать его немного лучше:

http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html

(подробнее здесь: http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/)

Это решение примерно так же близко, как я видел, чтобы делать то, что вы ищете. Это говорит о том, что это взломать и имеет некоторые проблемы:

если вы дважды выбираете один и тот же option в строке, ожидаемое поведение не срабатывает до тех пор, пока фокус не покинет select
когда кнопка select открыта, кнопка со стрелкой вниз исчезает (потому что переполнение скрывается приложением div)

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

Удачи!

Ответ 3

Существует не точное решение, но вы можете дать этот маленький html и css взломать для достижения своей цели. HTML

<div class="divWrapper">
 <select class="selectBox">
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 <option>011111111111111111111111111111111111111111111111111112</option>
 </select>
 </div>

CSS

.divWrapper{
    width:150px;
    overflow:hidden;
    }

.selectBox{
    width:150px;
    }

.selectBox:focus{
    width:auto;
    }

Здесь мы обертываем selectbox с div, ширина которого должна быть равна selectbox div. И в фокусе selectbox, сделав его снова автоматической шириной.

если вы можете использовать jQuery jquery. Он изменит размер ширины selectbox, как вы определили при выборе любой опции. Проверьте это на http://jsfiddle.net/sudhanshu414/5NEWc/2/

Ответ 4

Вот что я использую в качестве чистого решения css для этой проблемы. Если вы фокусируетесь на выборе, нажимая любые другие элементы страницы, я просто z-index выбираю: focus. Кроме того, вы можете установить ширину выделения: автофокус, если хотите, он все равно будет работать.

<!DOCTYPE html>
<html lang="en">
  <head>
<style type="text/css">
select:focus {width:300px;}
.cover select {width: 150px;} 
</style>

  </head>
  <body>


<div class="cover">
<select>
 <option>Select Box</option>
 <option>Option One a line of text</option>
 <option>Option Two a longer line of text</option>
 <option>Option Three is a much longer line of text</option>
 <option>Option Four </option>
</select>
</div>


  </body>
</html>

Если вы удалите "обложку" класса и просто настройте выбор, выбор также изменит размер на фокусе. поэтому у вас есть параметры, по которым вы хотите его отображать.

это было протестировано в новейшей версии chrome, firefox и IE

Ответ 5

Я не могу воспроизвести поведение, но вы можете попробовать css this:

select:focus{width:auto !important;}

Но вы также можете взглянуть на JQuery-UI.

[EDIT-1-]: Я попытался воспроизвести неожиданное поведение IE. В 7/8/9 я не вижу проблемы. Возможно, вы работаете с действительно старым IE? Попробуйте запустить обновление для версии 8, если это возможно.

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

$(document).ready(function(){
  $('select').click( function () { 
     //Try to alter the css here - but I'm not sure if this could work.
  });

[EDIT-2-]: A выберите меню для JQuery-UI. Но если вы рассматриваете другие плагины JQuery, вы можете использовать dropkick.js или взять посмотрите этот список.

Ответ 6

Не стоит использовать CSS только в IE, потому что это более или менее виджет OS, который вы хотите создать.

Попробуйте selectBox, который использует JavaScript для вставки некоторых HTML и JavaScript, чтобы имитировать bahaviour select, но с другой разметкой HTML

https://github.com/revsystems/jQuery-SelectBox или здесь
http://www.bulgaria-web-developers.com/projects/javascript/selectbox/