CODEWITHSUNDEEP
cssjquery-ui-autocomplete
Syntax
Syntax

Reputation: 496

customizing the drop down autocomplete box

I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.

I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.

I'v based mine off this one.

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">

Upvotes: 5

Views: 13605

Answers (6)

Francis Kim
Francis Kim

Reputation: 4285

Check out the file jquery.ui.theme.css,

the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.

Upvotes: 2

kalpesh
kalpesh

Reputation: 36

try using position or append to option... you can refer here...

http://jqueryui.com/demos/autocomplete/#option-position

Upvotes: 2

Etienne Carrier
Etienne Carrier

Reputation: 240

I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.

http://docs.jquery.com/UI/Menu#theming

You will be able to customize the look and feel of your dropdown in these class.

«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.

Upvotes: 2

yunzen
yunzen

Reputation: 33439

Try to add margin-top and margin-left in your css

Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.

Upvotes: 2

Filip
Filip

Reputation: 2522

In order to avoid using !important you could add your styles with jQuery and override them in that way.

$('ul.ui-autocomplete').css({
    color: 'red'
});

Another solution would be to remove the style attribute from the ul.

$('ul.ui-autocomplete').removeAttr('style');

Upvotes: 7

SMacFadyen
SMacFadyen

Reputation: 3165

Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.

Ex.

ul.ui-autocomplete {
color: red !important;
}

The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.

The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.

Upvotes: 4

Related Questions