Panels Container Should Have a Natural Height Based on Panel Contents

Here's the fiddle:

Why do I have to set an explicit height on the .panels element in order for the panels to be visible. Is there any way to make that element have a natural height based on the panel contents?

One constraint: I need to render the Enyo app into a div already on the page, not the document.body. I'm not looking for a Fittable Layout here. I just need the panels to have a natural height which can vary based on panel contents.

Is this possible with the given constraint?


  • Figured it out. More of a CSS problem than anything else. You have to give your panels the style:

    height: auto !important;

    because the Arranger kind will give them an inline style height: 100%, so that they take up the full height of the panels container. But if the container div is not part of a fittable layout, the height will be unknown unless stated as an explicit pixel value, which is what I want to avoid so the panels will size themselves naturally.

    Additionally, the .enyo-arranger CSS class needs it's overflow property overridden to:

    overflow: visible;

    Here's the full code:
  • Setting overflow:visible causes the entire app to become horizontally scrollable, which is not desirable. The only way I was able to overcome this is by setting a manual height on the panel container by using jQuery to determine the height of the tallest panel after the whole thing has rendered.
  • I spent the better part of yesterday trying to work around this. I couldn't do better than a hard-coded px panel height.
  • edited November 2013
    have you already tried to set the onTransitionStart function of the panels container to something like this:
    inSender.applyStyle('height', inSender.children[inEvent.toIndex].getComputedStyleValue('height',0) );
    worked for me.
  • I have found that if Panel is inside scrollable, the height of the Panel is fixed to 0px and contents will be invisible. Looks like panel is getting its height from container and scrollable does not give it to panel. In this case the panel must be given a fixed height. By using dynamic setting of height for the panel made it working but not how I liked it. So, I've managed rearrange my layout in a way that panels will not be created inside scrollable but scrollable will be created into panel if wanted.
Sign In or Register to comment.