Best method to expand contents to 100%?

[Matthias]

Been fighting this for a couple of days with no easy solution.

What is the best way to have the contents of a section be 100%?  In another word, what is the best way to push the lower sections to the bottom of the view?

When I try:
this.control = jQuery('<ul id="' + this.id + '" ><li><span>Item 1</span><div id="c1" style="height:100%;">Content 1</div></li><li><span>Item 2</span><div id="c2" style="height:100%;">Content 2</div></li></ul>');
this.list = new kendo.ui.PanelBar(this.control.get(0),
                {
                    expandMode : 'single'
                });

Inspecting the HTML, c1 and c2 heights become "100px".  Seems to replace/ignore the setting.

I saw another thread of some lengthy code to expand the contents, but I need a generic way to manage N number of sections (not just two).

Also, it appears that PanelBar cannot be build dynamically.  Meaning, adding LI sections to UL section via jQuery.  The HTML shows, but it does not take on the behavior of the PanelBar.

Thanks.
            

[Dimo]

Hi Matthias,

I suppose you are aiming at something like this:

http://jsfiddle.net/dimodi/LH2w9/

This is a demo I made for a different case and demonstrates how the PanelBar has a fixed height and the expanded item(s) always take up as much space as possible, with a fixed ratio 75% / 25%. In case you have more items, or the ratio should vary, the implementation will become more complex.

Using 100% heights will not lead to the desired result, because you actually need "all remaining available space", which is a different thing. Moreover, according to web standards, a percentage height requires an explicit height set to the parent element, which you probably don't have. That's why height calculations are used in the above demo, and heights are set in pixels.

Regards,
Dimo
Telerik

[Matthias]

So you are saying that it is not possible without writing a bunch of code?  Additionally, the PanelBar would not be a fixed height (maybe static at the time of the expand or collapse).

Any plans in making this happen, or should I need to write the code to do this ourselves?

[Dimo]

Hello Matthias,

Yes, the desired behavior is not supported out-of-the-box and requires custom coding.

You can vote for such a feature at the following location, which we take into consideration when deciding what to implement next.

http://kendoui-feedback.telerik.com/

Regards,
Dimo
Telerik