Question

在我的网站上，我正在使用这个多选指令几个地方

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

例如我在导航栏中使用它作为语言选择下拉列表。但是我想指定语言下拉列表的宽度小于标准。其他地方我使用相同的指令和自动宽度是好的。我可以通过改变css文件中的min-width和max-width来改变语言菜单的宽度，但这会改变我所有多重选择的宽度。

基本上，我怎样才能改变指令的一个特定实例的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时，isteven-multi-select div将包含以下内容：

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

因此，通过在css文件中编辑.checkboxLayer，我可以调整下拉菜单的宽度。但是对于所有多选实例都会更改。如果我将另一个类添加到isteven-multi-select，它不起作用，因为这是父div。

Answer 1

将css类添加到带有指令的div中，您需要更小的下拉列表：

groupBy

然后在你的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)"

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

Angularjs - 个人指令宽度

1 个答案: