Skip to main content

Search and Top Navigation

#8140 closed bug (fixed)

Opened February 25, 2012 10:38AM UTC

Closed February 27, 2012 02:34PM UTC

nested accordion is oversized

Reported by: rp Owned by:
Priority: major Milestone: 1.9.0
Component: ui.accordion Version: 1.8.17
Keywords: Cc:
Blocked by: Blocking:
Description

Nested accordions get the wrong width, unless width: auto is applied to the inner accordion's style.

Attachments (0)
Change History (10)

Changed February 25, 2012 12:04PM UTC by scottgonzalez comment:1

resolution: → invalid
status: newclosed

I'm not sure what you're expecting this to do. You have headers as accordions, and tables can't be accordions.

Changed February 25, 2012 06:45PM UTC by rp comment:2

my comment on the tables are just that - a comment "btw". I kind of expected that, but wanted to take this opportunity for confirmation.

The ticket is regarding, oversized internal accordion.

Have you tried the included HTML with, and without the STYLE="width:auto"? I've tried it on Chrome and on Iceweasel, both render the internal accordion protruding rightward unless "width:auto" is added.

Changed February 25, 2012 07:54PM UTC by scottgonzalez comment:3

Tables aren't supported, so your test case is invalid.

Changed February 25, 2012 08:43PM UTC by rp comment:4

Pls. pls - forget the table.

have a look at the section where only H4 and DIVs are.

... or, let mi rephrase the exposing example (no tables now):

<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
        $(function() {
                $( ".internal" ).accordion();
                $( ".external" ).accordion();
                $( ".tabami" ).tabs();
                $( ".internal h4" ).css('padding-left', '20px');
                $( ".external h1" ).css('padding-left', '20px');
        });
</script>

<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.8.17.custom.css" />

<div class="external">
<h1>2011</h1>
<div class="internal" style="width:auto">
 <h4>Pierwszy</h4> <div id="111">
 Pierwszy nieziemskie obrazek nacierski
 </div> <h4>Drugi</h4> <div id="112">
 Ala ma kota a kot ma ale
 </div> <h4>Czeci</h4> <div id="113">
 Wlaz kotel na plotek i mruga
 </div> <h4>Warty</h4> <div id="114">
 A to heca do pieca
 </div> <h4>Piaty</h4> <div id="115">
 makaroniarstwo
 </div>
</div>

<h1>2012</h1>

<div class="internal" style="width:auto">
 <h4>Pierwszy</h4> <div id="11">
 Pierwszy nieziemskie obrazek nacierski
 </div> <h4>Drugi</h4> <div id="12">
 Ala ma kota a kot ma ale
 </div> <h4>Czeci</h4> <div id="13">
 Wlaz kotel na plotek i mruga
 </div> <h4>Warty</h4> <div id="14">
 A to heca do pieca
 </div> <h4>Piaty</h4> <div id="15">
 makaroniarstwo
 </div>
</div>

</div>

Changed February 25, 2012 10:40PM UTC by scottgonzalez comment:5

description: I've searched the tickets database for "nested accordion" tickets, but none of what I've found looks like relevant (for my novice eye) to this one. \ \ The following code contains STYLE="WIDTH:AUTO" within the DIV segment of the INTERNAL accordion. Without it, the nested-internal accordion does not fit the container. \ \ May be that style adjustment should be added to the provided themes? \ \ BTW: the accordion of table content does not look too great. But tables are not supposed to be folded up? \ \ {{{ \ <script src="/js/jquery-1.7.1.min.js"></script> \ <script src="/js/jquery-ui-1.8.17.custom.min.js"></script> \ <script type="text/javascript"> \ $(function() { \ $( ".internal" ).accordion(); \ $( ".external" ).accordion(); \ $( ".tabami" ).tabs(); \ $( ".internal h4" ).css('padding-left', '20px'); \ $( ".external h1" ).css('padding-left', '20px'); \ }); \ </script> \ \ <link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.8.17.custom.css" /> \ \ <div class="external"> \ <h1>2011</h1> \ <table class="internal"> \ <thead> \ <tr><th colspan="5">Mieszanka</th></tr> \ </thead><tbody id="tb0" > \ </tbody> \ </table> \ \ <h1>2012</h1> \ \ <div class="internal" style="width:auto"> \ <h4>Pierwszy</h4> <div id="11"> \ Pierwszy nieziemskie obrazek nacierski \ </div> <h4>Drugi</h4> <div id="12"> \ Ala ma kota a kot ma ale \ </div> <h4>Czeci</h4> <div id="13"> \ Wlaz kotel na plotek i mruga \ </div> <h4>Warty</h4> <div id="14"> \ A to heca do pieca \ </div> <h4>Piaty</h4> <div id="15"> \ makaroniarstwo \ </div> \ </div> \ \ </div> \ }}} \ \ Nested accordions get the wrong width, unless `width: auto` is applied to the inner accordion's style.
resolution: invalid
status: closedreopened

I've cleaned up the ticket description. In the future please do not paste code into tickets. Use jsbin or jsFiddle as mentioned in the red box.

Changed February 25, 2012 10:41PM UTC by scottgonzalez comment:6

priority: minormajor
status: reopenedopen

Changed February 26, 2012 03:39AM UTC by scottgonzalez comment:7

resolution: → wontfix
status: openclosed

You shouldn't set the panel itself as another accordion. Wrap the inner accordion in a div and have the wrapper div be the panel for the other accordion.

http://jsbin.com/ecafih/

Changed February 26, 2012 07:23AM UTC by rp comment:8

Replying to [comment:7 scott.gonzalez]:

You shouldn't set the panel itself as another accordion. Wrap the inner accordion in a div and have the wrapper div be the panel for the other accordion.

I see. How strange - particularly for a novice jquery-ui user like myself. Surely, once I know this requirement, it's easy to avoid those glitches.

http://jsbin.com/ecafih/

And naturally I'll get acqueinted with the jsbin.com - nice, haven't seen it before.

Changed February 27, 2012 02:32PM UTC by scottgonzalez comment:9

resolution: wontfix
status: closedreopened

This actually used to be possible, so I'm reopening.

Changed February 27, 2012 02:34PM UTC by Scott González comment:10

resolution: → fixed
status: reopenedclosed

Accordion: Removed width: 100% on accordion wrapper which was used to fix an animation bug that no longer exists with the new animation code. Fixes #8140 - nested accordion is oversized.

Changeset: 1d2fcaddadbb1ad313e3d7c5018f2fd9f31ce1e0