I have typeahead
from ngx-bootstrap
, and I want to locate it so that typeahead dropdown is in the centre of my input.
I mean something like this https://joxi.ru/82383oJCJ4gGyA
Thanks!
It looks no way to change position setting in ng-bootstrap
So I use CSS to overwrite it, but it needs to be careful to use it to avoid having too much !important
syntax
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%);
}
*/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.