Ngx-bootstrap: Typeahead change width of dropdown

[andy-dev]

Kudos on your work, this is more of a question than an issue, I want to override the dropdown menu on the typeahead to be same width as input. I can achieve this on the console changing the positioning of typeahead-container position to static and then setting dropdown width to 100%. Being very new to angular 2 not sure what would be the best way to achieve this. Thanks in advanced.

[valorkin]

it could work, but will not help when typeahead will be attached to body
and I would say this feature was mentioned couple of times
and in my todo list ;)

[valorkin]

yep, here it is: https://github.com/valor-software/ng2-bootstrap/issues/190

[AbelValdez]

Add in the global styles.scss

.dropdown-menu {
    min-width: 100% !important;
}
typeahead-container {
    width: 100% !important;    
}

[chanakin]

Using ng-deep:: did it for me

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

::ng-deep typeahead-container {
  width: 100% !important;
}

[chanakin]

Note: the code snippet above makes it 100% width regardless of what the input's width is, so if the parent is 500px and the input is 200px, the dropdown will be 500px in width. This isn't really what I wanted it to do.

After messing around with it more, it seems the dropdown menu has a hardcoded width styling of 320px. This is easy enough to override, which results in what I was hoping for: a more reasonable and dynamic width.

::ng-deep .dropdown-menu {
  width: auto;
}

Works like a charm in my testing.

[cofad]

I had to add position relative to my container form to get the width of the drop down to match the input width.

form {
  position: relative;
}

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

}

I also wanted to the text to wrap with the width now fixed to the input box width so I added the following:

::ng-deep .dropdown-item {
  white-space: normal;
}