CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-autocomplete
Hossain Khan
Hossain Khan

Reputation: 6452

jQuery UI - Autocomplete generated inline style override?

I'm using jQuery Autocomplete plugin which, generates following markup when suggestions show up.

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16; width: 1355px; position: relative; top: -1615px; left: 40px; display: none; ">
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">java</a>
    </li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-corner-all" tabindex="-1">javascript</a>
    </li>
</ul>

My understanding is, it's using the UI Position plugin to position it relative to the input field. But inside generated style="z-index: 16; width: 1355px; position: relative; top: -1615px; left: 40px; display: none; ", width is much longer than my input field. Since this is inline styles added by the module, I can not override this using ui-autocomplete selector. Any ideas?

Upvotes: 1

Views: 4480

Answers (1)

Andreas Louv
Andreas Louv

Reputation: 47127

Use the !important method in css: e.g.

.ui-autocomplete {
    width:200px !important;
}

Upvotes: 3

Related Questions