CODEWITHSUNDEEP
angulartypeaheadng-bootstrap
Nico
Nico

Reputation: 313

ng-bootstrap -> Typeahead Styling

I seems to be unable to style the dropdown menu of the ng bootstrap typeahead.

Styles for the input itself is fine (the component only contains a input/typeahead) but nothing applies for the dropdown (tried using the ngb-typeahead-window thatget inserted as well as the .dropdown-menu class for that.

Upvotes: 2

Views: 6327

Answers (2)

Lahiru TM
Lahiru TM

Reputation: 61

A great answer here: https://stackoverflow.com/a/51417049/4248983

tl;dr

  • The Typeahead window is a dynamically added component
  • Your component implementing the Typeahead has styles encapsulated to only itself
  • Set encapsulation: ViewEncapsulation.None in your @Component decorator to allow your component styles to be accessed globally

WARNING
Setting ViewEncapsulation.None will mean your component styles are available globally. Ensure your css selectors are specific enough to prevent impacting other elements in your application!

Upvotes: 5

Gijs Post
Gijs Post

Reputation: 199

ng-bootstrap is pretty limiting when it comes to changing its components. I'd say try using a template, that is the closest to customization you can come to. Plugins like ng-bootstrap and ngx-bootstrap are custom components that often don't support customizability to the extend that other plugins offer.

Upvotes: 2

Related Questions