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類，它將起作用。