ng-bootstrap - Typeahead dropdown width
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
For me works ng-deep. Looks more safe and scoped:
::ng-deep .dropdown-menu { width: 100%; }
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.