How to set the width of the dropdown in the typeahead module

Question

I was trying to see how I can set the dropdown in the Typeahead module to have the same width as the input text and not change dynamically based on the width of the content in the drop down. I am using 1.0.0-alpha.15 of ng-bootstrap.

Answer 1

Just add a width to the drop-down template

From

<template #rt let-r="result" let-t="term">
    <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r.flag" width="16">
    {{ r.name}}
</template>

To

<template #rt let-r="result" let-t="term">
    <div style="width: 350px;">
        <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r.flag" width="16">
        {{ r.name}}
    </div>
</template>

Plunk

how I can set the dropdown in the Typeahead module to have the same width as the input text

Would probably be a bad idea imho, but if you don't want a static width, you can calculate the input string width and use NgStyle instead.