Skip to main content

Search and Top Navigation

#8688 closed bug (invalid)

Opened October 16, 2012 09:01PM UTC

Closed October 31, 2012 08:57AM UTC

Last modified November 17, 2012 04:05AM UTC

Styling an h3 tag with padding now alters Accordion heading padding

Reported by: Owned by:
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:

Attachments (0)
Change History (5)

Changed October 16, 2012 09:04PM UTC by comment:1

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

Changed October 16, 2012 09:24PM UTC by scottgonzalez comment:2

component: ui.coreui.accordion
owner: →
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?

Changed October 31, 2012 08:57AM UTC by trac-o-bot comment:3

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!

Changed November 14, 2012 04:24PM UTC by comment:4

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

Changed November 17, 2012 04:05AM UTC by tj.vantoll comment:5

@dsargent@… The

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 -