CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-autocomplete
code-8
code-8

Reputation: 58692

Fix Gap on jQuery Autocomplete Dropdown Menu

Gap

I'm working with jQuery Autocomplete. When I start type a and hover one of the option, I see a gap on the right.

enter image description here

Inspect

Then, I try to inspect that list. I can see the style, but the dropdown-menu is gone.

enter image description here

Dropdown Disappear

enter image description here

CSS

{
    background-image: url("/images/photos/devices/xperia-z-ultra.jpg");
    background-size: 28px 19px;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    /* support: IE7; */
    font-weight: normal;
}
.ui-widget-content a {
    color: #222222;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}

How do I fix that gap ?

I've tried messing around with the toggle state on Chrome Dev Tool, and still couldn't the style for that.

Any hints / suggestions ?

Upvotes: 1

Views: 314

Answers (1)

Callam
Callam

Reputation: 1009

It looks like it's jQuery UI's Autocomplete widget with a theme and some modifications; but if you select

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">

In chrome dev tools on the left, on the right hand side you can change

display:none;

to

display:block;

to see whats going on and troubleshoot the offending element without it dissappearing

Upvotes: 1

Related Questions