This is a migrated thread and some comments may be shown as answers.

Best method to expand contents to 100%?

3 Answers 47 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Matthias
Top achievements
Rank 1
Matthias asked on 25 Feb 2014, 07:38 PM
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.
            

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Feb 2014, 10:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matthias
Top achievements
Rank 1
answered on 27 Feb 2014, 12:53 PM
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?
0
Dimo
Telerik team
answered on 27 Feb 2014, 01:18 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
PanelBar
Asked by
Matthias
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Matthias
Top achievements
Rank 1
Share this question
or