ui选择下拉框，左侧自动调整大小

Question

我正在使用AngularJS ui-select，并且正在执行多选下拉列表，现在下拉框的大小为auto，因此其宽度与最长的可选文本一样长。 因此，整个盒子的宽度大于输入宽度。 现在，我要尝试的是使该框转到左侧，而不是像默认情况下那样移至右侧。

<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 v3.1.0（或更高版本），则所需的类是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 ，因此该方法无效。 然后我想到了一个小的指令，它将在列表中添加该类：

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类，它将起作用。