ng-bootstrap - Typeahead dropdown width

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