Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#8688 closed bug (invalid)

Styling an h3 tag with padding now alters Accordion heading padding

Reported by: [email protected] Owned by: [email protected]
Priority: minor Milestone: 1.10.0
Component: ui.accordion Version: 1.9.0
Keywords: Cc:
Blocked by: Blocking:


It didn't do this in 1.8. I found nothing in the docs about this being expected behavior. Example can be found at:

Change History (5)

comment:1 Changed 10 years ago by [email protected]

Dang, not UI.core, sorry itchy submit trigger. Can't change it apparently. . .

comment:2 Changed 10 years ago by Scott González

Component: ui.coreui.accordion
Owner: set to [email protected]
Status: newpending

Accordions used to require nested elements to create headers. We removed this requirement, so now the styling is applied to the header element (the h3 in this case). We definitely don't want to have the requirement of nested elements, so do you have a suggestion on what you'd like us to do here?

comment:3 Changed 10 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

comment:4 Changed 10 years ago by [email protected]

Sorry for taking so long to reply. Just getting back to this. The fix is fairly simple, I just had to add

.ui-accordion h3{

padding-left: 2.2em !important;


to our jQueryUIOverides.css file. Without that the css in our default.css file that styles the h3 tag with a padding:0 would break the accordions title placement making it overlap with the icon. I'm thinking this may be a common problem for anyone that has any padding set on their h3 tags. It did not do this before 1.9

comment:5 Changed 10 years ago by tj.vantoll

@[email protected]… The padding-left applied by jQuery UI is via the .ui-accordion .ui-accordion-icons selector so it'll be safe from things like global resets. jQuery UI itself isn't going to use a more specific selector so this is just something people will have to fix on their own. The change made for this in 1.9 is documented in the upgrade guide -

Note: See TracTickets for help on using tickets.