search

Meteor-Community-Packages / meteor-autocomplete

Client/server autocompletion designed for Meteor's collections and reactivity.
https://atmospherejs.com/mizzao/autocomplete
MIT License
350 stars 109 forks source link

Default styling + bootstrap leaves unselected options invisible #76

Closed tlianza closed 9 years ago

tlianza commented 9 years ago

Out of the box, with bootstrap3 and no other styles, the items in the dropdown that are not highlighted are invisible for me. I'm assuming white-on-white, but I can't really tell because when I'm using the chrome inspector, the act of trying to inspect them makes them disappear from the DOM. I tried overriding the styles of .-autocomplete-item so the default color is black, but that didn't seem to help. I feel like I'm missing something and would appreciate any pointers in the right direction.

Would be great if the README had some tips on styling.

screen shot 2015-02-15 at 1 12 18 pm

mizzao commented 9 years ago

Bootstrap's label class, among others, applies this "bold white" text style. You can fix this by looking at your DOM tree and seeing what parent elements have classes that activate this, and taking the autocomplete box out of that element.

You can also debug this by pausing the browser using a keyboard shortcut.

tlianza commented 9 years ago

Perfect - thank you! The debug tip is extremely helpful.