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 comment:1
| resolution: | → invalid |
|---|---|
| status: | new → closed |
Changed February 25, 2012 06:45PM UTC by 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 comment:3
Tables aren't supported, so your test case is invalid.
Changed February 25, 2012 08:43PM UTC by 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 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: | closed → reopened |
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 comment:6
| priority: | minor → major |
|---|---|
| status: | reopened → open |
Changed February 26, 2012 03:39AM UTC by comment:7
| resolution: | → wontfix |
|---|---|
| status: | open → closed |
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.
Changed February 26, 2012 07:23AM UTC by 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 comment:9
| resolution: | wontfix |
|---|---|
| status: | closed → reopened |
This actually used to be possible, so I'm reopening.
Changed February 27, 2012 02:34PM UTC by comment:10
| resolution: | → fixed |
|---|---|
| status: | reopened → closed |
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
I'm not sure what you're expecting this to do. You have headers as accordions, and tables can't be accordions.