UI选择下拉框，自动尺寸向左

Question

我正在使用AngularJS UI选择，并且我正在进行多选择下拉列表，现在下拉框的大小是自动的，因此宽度是最长的可选文本。因此，整个盒子的宽度大于输入宽度。现在，我要做的是使该框像默认情况下一样，而不是右侧。

<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模板，有一种方法可以实现。

选择列表是一个下拉列表，您可以使用类更改其对齐方式。因此，如果您在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选择中添加相同的uiselect-menu-right类，它将起作用。