Search jQuery

jQuery Forum

Nested accordion in tab breaks out of the box

in Using jQuery UI • 10 years ago

Hi,
I've made a page where I nest an accordion (A2) in an accordion (A1) in a tab. Functionally everything works the way I want it to. But visually I have a problem. A1 stays within the boundaries of the tab, but A2 does not.
How can I solve this?
As an example says more than words I've provided one on Music Collection
The theme is vader (with only one change: the background color of the active accordion bar)
Thanks for any help or ideas

Replies(1)

dustin_mb

Re: Nested accordion in tab breaks out of the box

10 years ago

I don't know whether this is the best solution (or a complete solution), but I've been playing around with this as well. I've found that if I remove from jquery-ui-1.8.10.custom.css (or jquery.ui.accordion.css, if you're using CSS from dev. bundle folder of UI download, which I am) the width from the .ui-accordion then nested accordions are constrained within their respective accordions.

In this line in CSS, with width commented out.

.ui-accordion { /*width: 100%;*/ }

According to the comment in the CSS, this bug http://bugs.jqueryui.com/ticket/4615 is the rationale for setting the width in the CSS on the .ui-accordion to explicitly fix an IE 6/7 issue - setting width to 100% fixes issue of hanging/disjointed accordion panel header when div wrapper has background.

I've found that this is only a problem when you init your accordion with autoHeight: true. If I set up with autoHeight: false and then set the width of a div wrapper to 100% (and even a background on it) rather than having the jqueryUI CSS set it for the .ui-accordion, then I find that the hanging/disjointed accordion header issue doesn't occur, even if you have a wrapper with set background.

So, setting up the accordions:

$( "#a1" ).accordion({
autoHeight: false,
navigation: true,
collapsible: true,
header: "h3.l1"
});
$( "#a2" ).accordion({
autoHeight: false,
navigation: true,
collapsible: true,
header: "h3.l2"
});
$( "#a3" ).accordion({
autoHeight: false,
navigation: true,
collapsible: true,
header: "h3.l2"
});

The markup:

<div style="background:red; width:100%">
<h2>Accordion</h2>
<div id="a1">
<div>
<h3 class="l1"><a href="#">First</a></h3>
<div id="a2">
<div>
<h3 class="l2"><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3 class="l2"><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3 class="l2"><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>
<div>
<h3 class="l1"><a href="#">Second</a></h3>
<div id="a3">
<div>
<h3 class="l2"><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3 class="l2"><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3 class="l2"><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>
<div>
<h3 class="l1"><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</div>

If you do need autoHeight: true, and you're concerned about IE 6/7 issues, well, I haven't figured that out yet. In testing, I've found that when autoHeight: true is set, that the markup above and removing the width: 100% from the jquery UI CSS still helps with the bug, but a new issue appears - my nested accordion in the main Second panel fails with sizing issues. Still fiddling with this and hoping it is some combination of CSS declarations that would sort it out.

Top Reply

Response title

Attachments

jQuery Forum

Nested accordion in tab breaks out of the box

Replies(1)

Re: Nested accordion in tab breaks out of the box

Statistics

Tags

Actions

Related Posts