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

Answer 2

For me works ng-deep. Looks more safe and scoped:

::ng-deep .dropdown-menu { width: 100%; }

Answer 3

@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 4

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;}