typeahead ngx-bootstrap 的位置

【问题标题】：Postition of typeahead ngx-bootstraptypeahead ngx-bootstrap 的位置
【发布时间】：2018-12-27 18:17:57
【问题描述】：

我有来自ngx-bootstrap 的typeahead，我想找到它，以便预先输入的下拉菜单位于我输入的中心。

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

Link to StackBliz

谢谢！

【问题讨论】：

你对 typeahead 下拉菜单的意思是什么是我输入的中心。
我的意思是这样的joxi.ru/82383oJCJ4gGyA

标签： angular ngx-bootstrap typehead

【解决方案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%);
}
*/

【讨论】：