I’m using the JQuery UI accordion in my JQuery UI modal dialog. My code is identical to several working examples I’ve found on the web (especially http://jsfiddle.net/eKb8J/). The suspect the culprit is CSS related, but do not know how the fix the issue.
I’m using JQuery UI 1.8.7 and JQuery 1.7.2.
The Problem
Essentially, the arrow and header vertical bar are not aligned with the accordion header, making it look really sloppy. I’d like the header to appear on the same line as the arrow and the header vertical bar.
Screenshot of issue posted:
https://i.stack.imgur.com/rpn1H.png
Any help would be greatly appreciated!
When I look at the elements in FireFox using Ctrl-Shift-I, I get:
The CSS applied to the accordion element: https://i.stack.imgur.com/DCpSe.png
The CSS applied to the header element within the accordion: https://i.stack.imgur.com/iD2tM.png
A URL where we can view the code would be helpful. Also, trying downloading the latest version of Firefox, visiting your page, and clicking Ctrl+Shift+I. Then click on the element in question. This is a very quick way to narrow down the CSS culprit.