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

Выберите раскрывающийся список с фиксированной шириной, обрезая содержимое в 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 ]

0 голосов
/ 26 июня 2015

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

<!-- 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'>/419652/vyberite-raskryvayschiisya-spisok-s-fiksirovannoi-shirinoi-obrezaya-soderzhimoe-v-ie</option>
    ...
  </select>
</div>
0 голосов
/ 07 августа 2015

Чистый раствор 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 голосов
/ 26 июня 2012

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

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

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...