预先输入ngx-bootstrap的位置

Question

我有typeahead的{​​{1}}，我想找到它，以使typeahead下拉菜单位于输入的中心。

我的意思是这样的https://joxi.ru/82383oJCJ4gGyA

Link to StackBliz

谢谢！

Answer 1

似乎无法在ng-bootstrap中更改position setting

所以我使用CSS覆盖它，但是使用它时要小心，避免使用过多的!important语法

Link to StackBliz

app.component.css

// :host => only work in app.component.css
// :host ::ng-deep => look for selector `typeahead-container.dropdown-menu` in `app.component.css`
:host ::ng-deep typeahead-container.dropdown-menu {
    left: 50%!important;
    transform: translateX(-50%);
}

/*
// it will be compiled to this
[_nghost-c0] typeahead-container.dropdown-menu {
    left: 50%!important;
    transform: translateX(-50%);
}
*/