search

alexurquhart / vue-bootstrap-typeahead

An autocomplete/typeahead component for Vue 2 and Bootstrap 4
https://alexurquhart.github.io/vue-bootstrap-typeahead/
MIT License
206 stars 157 forks source link

Results on top? #17

Closed dunderrrrrr closed 6 years ago

dunderrrrrr commented 6 years ago

Is there a way to make the results appear above the searchfield? I fiddled around and manage to set margin-top: -120px; to the class .vbt-autcomplete-list[data-v-9a21a6f4].

But how do I bind it? I have multiple searchfields on the same page and I would like this to only be set on one autocomplete-list.

dunderrrrrr commented 6 years ago

Ah, I solved it.

div.yourothersearchfield .vbt-autcomplete-list {
    margin-top:-100px;
}

Is this the correct way of doing it, or is there an easier way?

Results in: -

dunderrrrrr commented 6 years ago

However...

Seems like if the .vbt-autcomplete-list is big, multiple results, it covers the searchfield. So this is not a very good solution.

Setting bottom padding with bottom:60px seems to work.

Suggestions?

alexurquhart commented 6 years ago

I have a feeling you will have to modify the position of the autocomplete list every time the size/content changes. I already use resize observer to modify the width of the list based on the width of the input, you might be able to do the same for the vertical position.