Forums

Board index » YUI 3 Gallery Forums: » Gallery Forums » Accordion

Page 1 of 1   [ 5 posts ]
New Topic | Post Reply | Print view

Emanuele Ciriachi

  • Username: Emanuele_Ciriachi
  • Joined: Thu Jan 13, 2011 2:02 am
  • Posts: 19
  • Location: Londonistan
  • Offline
  • Profile
Tags:

Problem when contentHeight method is "auto"

Post Posted: Fri Oct 28, 2011 8:11 am
+0-
I have created a control based on the Accordion widget, where all the children are created through Javascript; contentHeight "stretch" and "fixed" works fine, but if I attempt to set it to "auto" it will close down the only open one and no other items will ever expand.

Does anyone has an example of Accordion using contentHeight "auto" _and_ dynamically loaded items that works out of the box?

Iliyan Peychev

YUI Contributor

  • Username: peychevi
  • Joined: Tue Feb 24, 2009 12:38 pm
  • Posts: 136
  • Location: Varna, Bulgaria
  • Twitter: ipeychev
  • GitHub: ipeychev
  • Gists: ipeychev
  • Offline
  • Profile
Tags:

Re: Problem when contentHeight method is "auto"

Post Posted: Fri Oct 28, 2011 10:33 pm
+0-
Hi Emanuele,

There are some examples:
http://ipeychev.github.com/yui3-gallery ... items.html

You can click on "Auto" button and then add one or more items.

Also, here:
http://ipeychev.github.com/yui3-gallery ... indow.html

the third item has contentHeight set to 'auto'.

If it does not work for you, please paste an example with code to debug.

Iliyan

Emanuele Ciriachi

  • Username: Emanuele_Ciriachi
  • Joined: Thu Jan 13, 2011 2:02 am
  • Posts: 19
  • Location: Londonistan
  • Offline
  • Profile

Re: Problem when contentHeight method is "auto"

Post Posted: Mon Oct 31, 2011 3:26 am
+0-
Thank you, I managed to pin-point the problem through direct comparison with your code.

Apparently, if the bodyContent is set without any HTML tags around it, you will experience the problem I have mentioned earlier; give it a go with the following sample code:

Code:
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.03.23-22-20'
}).use('gallery-accordion', function(Y) {
    var item1, item2, item3, accordion, counter;
           
   accordion = new Y.Accordion({
      srcNode: "#acc1",
      useAnimation: true,
      collapseOthersOnExpand: true
   });
    accordion.render();

   for (counter = 0; counter < 3; counter++) {
      child = new Y.AccordionItem({
         label: "This is a label "+ counter,
         closable: false,
            contentHeight: {
                method: "auto"
            },
         animation: { duration: 0.5 }
      });

      //child.set("bodyContent", "<div>This is a bodyContent "+ counter +"</div>");
      child.set("bodyContent", "This is a bodyContent "+ counter +"");
      accordion.addItem(child);
   }
});


Try the two different child.set lines. Is this advertised somewhere in the documentation, or it implicitly assumes that the bodyContent will have a tag?

EDIT: I've also found out that if the div directly inside the one with the class "yui3-widget-bd" has the style "height: 100%", the accordion feature won't work; this was causing me some trouble, hence my decision to wrap whatever child content inside another plain <div>

Iliyan Peychev

YUI Contributor

  • Username: peychevi
  • Joined: Tue Feb 24, 2009 12:38 pm
  • Posts: 136
  • Location: Varna, Bulgaria
  • Twitter: ipeychev
  • GitHub: ipeychev
  • Gists: ipeychev
  • Offline
  • Profile

Re: Problem when contentHeight method is "auto"

Post Posted: Mon Oct 31, 2011 5:53 am
+0-
Emanuele_Ciriachi wrote:
Is this advertised somewhere in the documentation, or it implicitly assumes that the bodyContent will have a tag?


This is vague mentioned here:
[contentHeight]:
"auto - the browser will calculate content height"

This information is obviously not enough, but I think I have explained this in the forum before. Here is it one more time:
if contentHeight is set to 'auto', Accordion will calculate the height of this item based on its offsetHeight. And in order to receive proper value from the browser, the content should be wrapped in some element (usually div).

When I designed it, I wondered should I wrap the content implicitly or not. Based on my previous experience, I decided to not do it, because in most of the cases people set as content an already existing element. Rarely (like in your case) they add content in 'auto' items without any wrapping element.

Emanuele_Ciriachi wrote:
EDIT: I've also found out that if the div directly inside the one with the class "yui3-widget-bd" has the style "height: 100%", the accordion feature won't work; this was causing me some trouble, hence my decision to wrap whatever child content inside another plain <div>


Yes, this is normal. The explanation above should make it clear.

Iliyan

Emanuele Ciriachi

  • Username: Emanuele_Ciriachi
  • Joined: Thu Jan 13, 2011 2:02 am
  • Posts: 19
  • Location: Londonistan
  • Offline
  • Profile

Re: Problem when contentHeight method is "auto"

Post Posted: Tue Nov 01, 2011 1:30 am
+0-
Many thanks for your explanation, and awesome work.
Page 1 of 1   [ 5 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group