Style ng2-bootstrap's typeahead list-items

Question

Problem:

I want the results to be below each other (full width) and not to have a transparent background. I right clicked one of the items and clicked 'inspect' so I figured out what to use as a selector.

What I have tried:

ul.dropdown-menu li {
background-color: black !important;
opacity: 1 !important;
color: yellow !important;

}

Didn't change a thing, so either I'm not selecting it right or I don't know. I have a custom template:

<template #customItemTemplate let-model="item" let-index="index">
    <h5 style="width: 100%">{{model.title || model.name}}</h5>
</template>

but even in-line style didn't change a thing.

Question:

How can I style the results?

PS: I figured it might be useful to mention that I'm using MaterializeCSS.

Answer 1

我在optionsListTemplate公开了TypeaheadDirective optionsListTemplate输入，因此您可以完全覆盖 typeahead 结果模板；) 默认源代码，您可以在此处查看： https : //github.com/valor-software/ng2-bootstrap/blob/development/ src/typeahead/typeahead-container.component.ts#L22-L32