Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery autocomplete styling

While styling the jQuery autocomplete plugin, I get the following HTML code hardwired to my page:

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

How can I disable styling from being made through HTML and keep it done via CSS? I don't think my CSS files are overwriting that style.

Any help will do

like image 403
mabounassif Avatar asked Feb 16 '11 17:02

mabounassif


People also ask

How does jQuery autocomplete work?

The autocomplete (options) method declares that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. The options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.

How can create autocomplete search box in jQuery?

Syntax: $("TagId"). autocomplete({ source : itemList // List of Words. })

Which are jQuery ui widgets?

a jQuery UI widget is a specialized jQuery plug-in. Using plug-in, we can apply behaviours to the elements. However, plug-ins lack some built-in capabilities, such as a way to associate data with its elements, expose methods, merge options with defaults, and control the plug-in's lifetime.


1 Answers

jQuery autocomplete needs to set some inline styles to position the drop down list under the text box and size it equally.

It doesn't set anything else, so it's completely up to you to provide visual styling of it by setting styles of those classes that are added to it (ie. ui-autocomplete).

Advice

What I'm trying to tell you is this: set the visual aspects of the drop down list that gets displayed and don't worry about positioning and sizing inline styles.

Need to change positioning

If you do need to override positioning and sizing of this element you can always set your styles as !important.

ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

Additional edit

Setting margin-top doesn't do anything since it calculates position every single time it displays the drop down. But you can try setting this:

.ui-autocomplete
{
    border-top:5px solid transparent!important;
}

This actually does the trick.

like image 167
Robert Koritnik Avatar answered Oct 14 '22 04:10

Robert Koritnik