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

Answer 1

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 2

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 3

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

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!