ng-bootstrap - Typeahead dropdown width - css

Question

I started using the ng-bootstrap Typeahead component and I'm pretty happy with that.
One thing I would like to achieve is to get the dropdown items to have the same width as the input field, while the default behavior applies a width accordingly to the text length. It should be basic CSS...
I created a basic Example in Plunker.
As you can note, the applied style is ignored:
.dropdown-menu { width: 100%;}
While if I use browser dev tools, and apply the same it is applied.
Any idea on how to achieve the result, by using CSS?

Answer 1

Add encapsulation: ViewEncapsulation.None to the component
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'ngbd-typeahead-template',
templateUrl: 'src/typeahead-template.html',
styleUrls: ['src/typeahead-template.css'],
encapsulation: ViewEncapsulation.None
})
See updated plunker
Without ViewEncapsulation.None, the styles applied in this component will only effect this component and not any other component on this page.
Read this for more information

Answer 2

For me works ng-deep. Looks more safe and scoped:
::ng-deep .dropdown-menu { width: 100%; }

Answer 3

This is how I made it work within responsive col :
::ng-deep ngb-typeahead-window.dropdown-menu {
width: calc(100% - 30px);
}
or
::ng-deep .dropdown-menu.show {
width:calc(100% - 30px);
}
Not sure which one is the best option but I tend to think of the first one.

Answer 4

#Nandita's answer is correct, directly apply a width to dropdown menu won't affect.
And you want the dropdown menu to have same width as input, so you should add below CSS to her answer:
.dropdown-menu { width: 300px;}
Check result:
https://next.plnkr.co/edit/YvOymCLAwYgU3VmJ

Answer 5

This code 100% work, but with the class .dropdown-menu any other dropdown will be changed
::ng-deep .dropdown-menu { width: 100%; }
So I just used this code with ngb-typeahead- as the ID:
::ng-deep [id^="ngb-typeahead-"]{
width: 100%!important;
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: ellipsis!important;}

Answer 6

Expanding on Nandita Sharma's answer, when turning off ViewEncapsulation in Angular it's probably a good idea to scope any CSS rules to the component. This will avoid generically named classes from leaking out in the global CSS scope.
A really simple way of doing that is to scope everything inside of the component's selector:
// Name of the component containing the typeahead
app-parent-selector {
// Rules added here won't leak out into the global CSS scope
.dropdown-menu {
width: 400px;
}
}
It would also be wise to avoid any approach that uses shadow-piercing descendant combinators (::ng-deep, /deep/ or >>>) because support for them is gradually being removed from all major browsers and will eventually be removed from Angular.

Answer 7

The best thing to do would be adding this globally, provided you plan to use the type-ahead field the same way in all your pages. If you have a styles.scss which can hold all the global styles, add this there:
ngb-typeahead-window {
width:calc(100% - 30px);
.dropdown-item {
overflow: hidden;
text-overflow: ellipsis;
}
}

Answer 8

Using scss should do the trick. Find the parent div in your dom, and give it a class 'dropdown-wrapper'.
.dropdown-wrapper {
.dropdown-menu {
width: 90%;
}
}
Add this to your global scss. Cheers!