Hi
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%"><!--setting background and width explicitly here rather than having it set on the actual .ui-accordion in CSS -->
- <!-- Accordion -->
- <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.