ui-select 下拉框，自动向左调整大小

Question

我正在使用 AngularJS ui-select，我正在做一个 multiselect 下拉菜单，现在下拉框的大小是自动的，所以它的宽度与最长的 select 可用文本一样长。所以整个框的宽度大于输入宽度。现在我想做的是让那个盒子移到左侧而不是像默认情况下那样移到右侧。

<td style="width: 100px; vertical-align: text-top;">
                <div class="multiSelect">
                  <form name="inputForm" >
                        <ui-select ui-grid-edit-ui-select ng-required="isRequired" ng-model="dr.dir" append-to-body="true"
                            multiple search-enabled="false" close-on-select="false" hide-tags="true" hide-caret="true"
                            ng-style="{height:grid.options.rowHeight -1 }"
                            class="gridSelect multi" uis-open-close="dropdownClosedResolve(isOpen,$select);" custom-driver-multiselect="dr">
                          <ui-select-match></ui-select-match>
                          <ui-select-choices repeat="field in fields" position="auto">
                            <!-- <div ng-bind-html="field.title"></div> -->
                          <div ng-bind-html="field.title" style="margin-right: 20px"></div>
                          <div ng-class={"Ac":$select.isActive(this)} class="x-file"></div>
                          </ui-select-choices>
                      </ui-select>
                    </form>
                  <div>
              </td>

CSS 是 ui-select

的默认值

Answer 1

假设您使用的是 bootstrap 模板，那么有一种方法可以实现。

选择列表是一个下拉列表，这意味着您可以 change its alignment using classes。因此，如果您使用的是 bootstrap v3.1.0（或更高版本），则 required class 是 dropdown-menu-right 和 dropdown-menu:

.dropdown-menu-right {
    right: 0;
    left: auto;
}

由于 ui-select 指令没有控制它的属性，并且 dropdown-menu 隐藏在模板中，我们需要手动应用此类样式，例如：

风格：

.uiselect-menu-right .ui-select-dropdown {
    right: 0;
    left: auto;
}

在标记中应用：

<ui-select ... class="uiselect-menu-right">...</ui-select>

然而

我注意到您（和我一样）正在使用 append-to-body，因此该方法行不通。然后我想出了一个小指令，它将在列表中添加 class：

angular
  .module("mymodule")
    .directive("uiselectMenuRight", uiselectMenuRight);

function uiselectMenuRight() {

    return {
        restrict: "C",
        link: linkFunction
    };

    function linkFunction($scope, $element, $attrs) {
        var list = $element[0].querySelector('.ui-select-choices');
        if(list)
            list.classList.add('dropdown-menu-right');            
    }
}

只需在 ui-select 中添加相同的 uiselect-menu-right class 即可。

ui-select 下拉框，自动向左调整大小

ui-select dropdown box, auto size to left

html

javascript

css

angularjs

ui-select