Как применить сложный стиль к выбору компонента Select2?

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

Пользователь должен иметь возможность выбрать контакт из выпадающего меню. Каждая запись контакта должна отображаться в виде изображения профиля контакта и некоторых данных рядом с ним. В свернутом виде раскрывающийся список должен отображать выбранный контакт (т. е. изображение профиля выбранного контакта и некоторые данные рядом с ним) с «треугольником раскрывающегося списка» рядом с ним. В развернутом состоянии раскрывающийся список должен дополнительно отображать другие контакты, каждый с изображением профиля и данными. Проще говоря, я хочу использовать шаблоны, как описано в примере «Шаблоны» на примерной странице select2, только с более сложной компоновкой (изображение профиля слева плюс три строки текста рядом с изображением).

Мне удалось применить желаемый стиль к результатам, используя параметр formatResult select2, используя функцию форматирования, которая оборачивает изображение и данные в стилизованные элементы div (обратите внимание, что я использую класс css 'media' Twitter Bootstrap для стайлинга):

function formatContactResult(item) {
 if(!item.id)
    return "No contact selected";

 var contact = JSON.parse(item.text);
 return "<div class='media'><a class='pull-left' href='#'><img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /></a><div class='media-body' style='font-size: 11px;'><strong>" + contact.displayName + "</strong><br />" + contact.jobTitle + "</div></div>"
};

Моя проблема: я не могу понять, как применить такой сложный макет к выделению. Я знаю об опции formatSelection, но возвращаемое значение функции formatSelection заключено в элемент span, который не подходит для сложных макетов. Хотя я знаю, что это неверно, я попытался применить ту же функцию макета, о которой упоминал выше, но это, как и ожидалось, привело к странным результатам (желаемый макет был сдвинут далеко вправо).

Кто-нибудь знает, как я могу достичь описанного макета с помощью select2?

Если это представляет интерес, я использую плагин Select2 с Knockout.js и Twitter Bootstrap.


javascript css jquery-select2
person MichaelB    schedule 25.03.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я понял - проблема была в том, что все элементы div, содержащиеся в компоненте select2-choice, абсолютно позиционированы и стилизованы в select2.css:

.select2-container .select2-choice div {
    display: block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    [...]
}

Этот стиль используется для рендеринга «раскрывающегося треугольника» раскрывающегося списка, который является элементом div. К сожалению, у треугольника div нет собственного имени класса CSS, которое следует использовать для его стилизации.

Поэтому в качестве обходного пути я создал новый класс CSS и применил его к элементам div, которые я хотел отобразить внутри компонента select2-choice. Идея состоит в том, чтобы переопределить атрибуты position и width:

.innerDiv {
    position: relative !important; 
    width: auto !important;
}
person MichaelB    schedule 27.03.2013
comment
Вы случайно не стилизовали текст с помощью select2? Я пытался изменить свойство размера шрифта, но даже после редактирования CSS я не могу получить дескриптор текста внутри контейнеров select2, которые отображаются в раскрывающемся состоянии. Какие-либо предложения? - person Ace; 03.05.2013
comment
Да, я смог стилизовать текст. Для меня это работает, просто добавив font-size: 10px !important; к классу CSS .innerDiv, упомянутому выше. Конечно, вы должны проверить, не переопределяется ли ваш текстовый стиль каким-либо другим (вложенным) элементом, который также может иметь определения стиля !important или определения встроенного стиля. - person MichaelB; 07.05.2013