Angularjs - индивидуальная ширина директивы

Question

Angularjs - индивидуальная ширина директивы

0

На моем веб-сайте я использую эту многосекундную директиву несколько мест

http://isteven.github.io/angular-multi-select/#/main

Например, я использую его в своем навигаторе в качестве раскрывающегося списка выбора языка. Однако я хотел бы указать ширину раскрывающегося списка языков до уровня, не превышающего стандартного. В других местах я использую ту же директиву, и автоматическая ширина в порядке. Я могу изменить ширину языкового меню, изменив min-width и max-width в файле css, но это изменит ширину всех моих мультиселектов.

Итак, в основном, как я могу изменить css только одного конкретного экземпляра директивы?

[Обновить]

Многоселектор добавляется следующим образом:

<div isteven-multi-select
         input-model="languages"
         output-model="outputlanguages"
         button-label="icon name"
         item-label="icon name maker"
         tick-property="ticked"
         selection-mode="single"
         helper-elements="filter"
         on-item-click="changeLanguage(data)"
            >
</div>

Когда html загружается, div isteven-multi-select будет содержать следующее:

<span class="multiSelect inlineBlock">
     <button ...>
     </button>
     <div class="checkboxLayer"> //here is the dropmenu itself
     </div>
</span

Поэтому, редактируя.checkboxLayer в файле css, я могу настроить ширину выпадающего меню. Но это изменяется для всех экземпляров multiselect. Он не работает, если я добавлю еще один класс в isteven-multi-select, так как это родительский div.

user2910789 17 авг. 2015, в 12:58

Источник

0

ты можешь добавить скрипку?
Amit singh 17 авг. 2015, в 10:54
1

сначала добавьте класс к этому выбору и затем стилизуйте его согласно вашему требованию ..
Amit singh 17 авг. 2015, в 10:55
0

Я обновил вопрос
user2910789 17 авг. 2015, в 11:22

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

angularjs

css

1 ответ

Ещё вопросы

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

resolute_coder · Accepted Answer · 2015-08-17T19-07-00.000Z

Добавьте класс css в div с директивой, в которой вы хотите уменьшить раскрывающийся список:

<div isteven-multi-select
     input-model="languages"
     output-model="outputlanguages"
     button-label="icon name"
     item-label="icon name maker"
     tick-property="ticked"
     selection-mode="single"
     helper-elements="filter"
     on-item-click="changeLanguage(data)"

    <!-- Add this -->
     class="thinDropdown"   >
</div>

Затем в своем css напишите:

.thinDropdown .checkboxLayer {
    width: 200px;              /* Or whatever width you like */
}

Спасибо! Это было именно то, что я искал. Хотя это не сработало, указав ширину, но установка минимальной ширины и максимальной ширины на 200 пикселей сделала свое дело.