CODEWITHSUNDEEP
jquerycssjquery-uijquery-plugins
Nick Bergseng
Nick Bergseng

Reputation: 213

Default icons cascade over Custom Jquery UI Accordion Icons

I'm trying to use a Jquery Accordion with custom icons in the accordion headers, but Jquery's default (I think it might be some kind of "no icon found" icon) is displayed instead. I followed Jquery UI's documentation pretty strictly:

js:

var icons = {
    header: "ui-icon-egnyte-arrow-down",
    headerSelected: "ui-icon-egnyte-arrow-up"
};

jq(function() {
    uiAccordion = jq( "#sendAccordion" ).accordion({
        collapsible: true,
        icons: icons,
        autoHeight: false,
        navigation: true,
        animated: false,
        active: false
    });
});

css:

.ui-icon-egnyte-arrow-down { background-image: url(../images/icons/sendarrow_down.png); width: 15px; height: 15px; }
.ui-icon-egnyte-arrow-up { background-image: url(../images/icons/sendarrow_up.png); width: 15px; height: 15px; }

The rest of the Jquery files are pretty much stock 1.3.2 and UI 1.7.3.

If I look at the css with a debugger, I can see my icons are there, but are being cascaded over by the .ui-state-default .ui-icon classes.

Thanks for any help, and let me know if I need to provide more info!

Upvotes: 1

Views: 1463

Answers (1)

William Niu
William Niu

Reputation: 15853

It seems to be a bug in the older version. If you update your jQuery and jQuery UI to 1.6.2 and 1.8.14 respectively, you should see the problem fixed itself. See example: http://jsfiddle.net/william/x3w94.

If updating the files is not an option for you, you may need to overwrite the header style a bit:

.ui-accordion .ui-accordion-header a { padding-left: 1.7em; }

See example: http://jsfiddle.net/william/x3w94/2/.

Upvotes: 1

Related Questions