Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-bootstrap - Typeahead dropdown width

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?

like image 376
Momo Avatar asked Jul 19 '18 07:07

Momo


1 Answers

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

like image 194
Nandita Sharma Avatar answered Oct 04 '22 06:10

Nandita Sharma