CODEWITHSUNDEEP
cssangularbootstrap-typeaheadng2-bootstrap
Anthony
Anthony

Reputation: 139

Style ng2-bootstrap's typeahead list-items

Problem:

ng2-boostrap typeahead transparent background

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.

Upvotes: 1

Views: 2678

Answers (1)

valorkin
valorkin

Reputation: 1339

I have exposed optionsListTemplate input for TypeaheadDirective in v1.3.1 so you can COMPLETELY override typeahead results template ;) source code of default you can check here: https://github.com/valor-software/ng2-bootstrap/blob/development/src/typeahead/typeahead-container.component.ts#L22-L32

Upvotes: 1

Related Questions