Best method to expand contents to 100%?

4 posts, 0 answers
  1. Matthias
    Matthias avatar
    20 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2014 Link to this post

    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.
                
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 27 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Matthias
    Matthias avatar
    20 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2014 in reply to Dimo Link to this post

    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?
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 27 Feb 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready