CODEWITHSUNDEEP
angularngx-bootstraptypehead
Artem Halas
Artem Halas

Reputation: 163

Postition of typeahead ngx-bootstrap

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

Link to StackBliz

Thanks!

Upvotes: 1

Views: 1800

Answers (1)

Chunbin Li
Chunbin Li

Reputation: 2244

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

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%);
}
*/

Upvotes: 2

Related Questions