Question

我正在使用AngularJS ui-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

假设您正在使用引导程序模板，则有一种方法可以实现此目的。

选项列表是下拉列表，表示您可以change its alignment using classes。因此，如果您使用的是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课程即可。

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

1 个答案: