Opened 11 years ago

Closed 11 years ago

#8140 closed bug (fixed)

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 (last modified by Scott González)

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

Change History (10)

comment:1 Changed 11 years ago by Scott González

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.

comment:2 Changed 11 years ago by rp

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.

comment:3 Changed 11 years ago by Scott González

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

comment:4 Changed 11 years ago by rp

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>

comment:5 Changed 11 years ago by Scott González

Description: modified (diff)
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.

comment:6 Changed 11 years ago by Scott González

Priority: minormajor
Status: reopenedopen

comment:7 Changed 11 years ago by Scott González

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/

comment:8 in reply to:  7 Changed 11 years ago by rp

Replying to 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.

comment:9 Changed 11 years ago by Scott González

Resolution: wontfix
Status: closedreopened

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

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

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

Note: See TracTickets for help on using tickets.