CODEWITHSUNDEEP
javascriptjquerycssautocomplete
Geoherna
Geoherna

Reputation: 3564

jquery autocomplete dropdown is transparent

I am trying to use jquery autocomplete on one of my textfields, and everything seems to be ok except for the fact that the dropdown is transparent for some reason.

I am linking both jquery-ui.js and jquery-ui.css, both are version 1.11.4. It seems to be loading the values ok, the transparency of the dropdown seems to be the only problem. My js code is as simple as it can get:

$( "#edit_account" ).autocomplete({
source: dataArray
});

here is a screenshot of what it looks like:

enter image description here

I have looked around and have not found the same issue.

Thank you.

Upvotes: 8

Views: 6194

Answers (4)

Ishant Dahiya
Ishant Dahiya

Reputation: 111

I was using animate.css while dynamically adding Input Fields and initializing Twitter Typeahead on the same. Also tried Jquery Autocomplete but no luck, the dropdowns showed weird behaviour and were always transparent. Removing the Animate.css class did the trick for me.

Upvotes: 0

c7borg
c7borg

Reputation: 479

I found this as I had an issue but it was specifically on an IOS mobile device

Whilst none of the above worked the following (a hybrid of the above did)

I think this will be useful should the above not work.

.ui-autocomplete {
    background-color: #fff;
}

Upvotes: 3

Ram Ashish Pal
Ram Ashish Pal

Reputation: 203

.ui-autocomplete { background-color: inherit; }

It works for me.

Upvotes: 9

Shivangi
Shivangi

Reputation: 3072

The issue with the above case was just the transparent background.

The list that is appended to the DOM is 

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-autocomplete-custom"></ul>

with the CSS

.ui-autocomplete-custom {
    background: #87ceeb;
    z-index: 2;
}

This would add a color to the list, and z-index would ensure the element lies above another element.

Upvotes: 7

Related Questions