CODEWITHSUNDEEP
jquerycssjquery-uiautocomplete
dennisdee
dennisdee

Reputation: 160

Why is my jQuery autocomplete background transparent?

I'm using DevBridge's Autocomplete and it works beautifully, but I don't understand why the suggestions are shown on a transparent background.

I'm super terrible at frontend stuff, so I don't get why editing the CSS file like the following article doesn't work for me:

My html:

<!-- Own CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom_css.css') }}">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.

<form id="new_order" method="post" action="{{ url_for('summary') }}">
<div class="form-group col-sm" id="fruit">
  <input type="text" class="form-control" name="fruit_name" id="fruit_name">fruit_name<br>
  <button type="submit" class="btn btn-primary" form="new_order" id="new_order_summary">Summarise</button>
</div>
</form>

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- jQuery Autocomplete: https://github.com/devbridge/jQuery-Autocomplete-->
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.autocomplete.min.js', version=rnd) }}"></script>
<!-- own JS file -->
<script type="text/javascript" src="{{ url_for('static', filename='js/own_js_file.js', version=rnd) }}"></script>

My CSS as described on DevBridge's website: https://www.devbridge.com/sourcery/components/jquery-autocomplete/

.ui.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.ui.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }

Am I missing some CSS or JS reference in my html? What am I doing wrong?

Upvotes: 0

Views: 1133

Answers (1)

Kuru
Kuru

Reputation: 738

You have to include some additional styling

.autocomplete-suggestions {
    overflow: auto;
    border: 1px solid #CBD3DD;
    background: #FFF;
}

Check their styling section for more info

Upvotes: 1

Related Questions