Question

我正在尝试将Angular Typeahead（https://angular-ui.github.io/bootstrap/）与ag-grid（https://www.ag-grid.com/）一起使用。我已将angularCompileRows设置为true，并且我已为typeahead设置了单元格编辑器，并且正在激活typeahead下拉列表。但是，下拉列表隐藏在网格中的其他行后面。如何确保我可以在其他网格行的顶部看到预先输入？我尝试使用firebug在<ul>元素上将z-index设置为9999，但列表仍然是隐藏的。

这是我的Cell编辑器：

 // function to act as a class
    function TypeAheadCellEditor () {}

    // gets called once before the renderer is used
    TypeAheadCellEditor.prototype.init = function(params) {
        // create the cell

        this.eInput = document.createElement('input');
        this.eInput.setAttribute("typeahead", "cardCode for cardCode in getCardCodes($viewValue)");
        this.eInput.setAttribute("typeahead-loading", "loadCardCodes");
        this.eInput.setAttribute("typeahead-wait-ms", "300");
        this.eInput.setAttribute("ng-model", "selectedItemCode");
        this.eInput.value = params.value;

    };

    // gets called once when grid ready to insert the element
    TypeAheadCellEditor.prototype.getGui = function() {
        return this.eInput;
    };

    // focus and select can be done after the gui is attached
    TypeAheadCellEditor.prototype.afterGuiAttached = function() {
        this.eInput.focus();

    };

    // returns the new value after editing
    TypeAheadCellEditor.prototype.getValue = function() {
        return this.eInput.value;
    };

Answer 1

将此添加到您的css：

.ag-cell {
    overflow: visible;
}

Answer 2

您是否尝试过uib-typeahead

中的选项

typeahead-append-to $（默认值：null） - 是否应将typeahead弹出窗口附加到元素而不是父元素？
typeahead-append-to-body $（默认值：false） - 是否应将typeahead弹出窗口附加到$ body而不是父元素？

具有角度类型的ag-grid

2 个答案: