Full Height PanelBar

4 posts, 0 answers
  1. Dave
    Dave avatar
    9 posts
    Member since:
    Jul 2007

    Posted 18 Jan 2012 Link to this post

    Is there any way to achieve a full-height PanelBar with per-group scrolling? Specifically, what I'd like to achieve is to have the space available to the PanelBar be predefined. When the PanelBar starts all the items should be collapsed at the top (as usual). When you open an item, the content space should expand to fill up the entire allocated space, not just what's needed for the content. The other titles should end up at the bottom of the allocated space below the new content. If the content is to large for the space, then a scroll bar should be added inside the content area (not outside over the whole PanelBar - otherwise you have to scroll to get to the other PanelBar headings).

    I'm looking for the exact same behavior as in this example for the ASP.NET Ajax PanelBar:
    http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/scrolling/defaultcs.aspx

    Is this possible with the Kendo PanelBar? 
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 18 Jan 2012 Link to this post

    Hi Dave,

    How about adding some style attributes to the div that displays the content for each panel?

    Here is the HTML:

    <ul id="panelBar">
        <li>Item 1
            <div style='height:100px; overflow-x:auto;'>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
            </div>
        </li>
        <li>Item 2
            <div style='height:100px; overflow-x:auto;'>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
                Here is some text</br>
            </div>
        </li>
    </ul>

    Here is the javascript:

    <script type="text/javascript">
      
        $(document).ready(function () {
            $('#panelBar').kendoPanelBar({
                expandMode: "single"
            });
        });
      
    </script>

    Hope this helps...

    Regards,

    John DeVight
  3. Kendo UI is VS 2017 Ready
  4. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 27 May 2015 Link to this post

    I would like to know too!  John's suggestion does not achieve what Dave wanted to do.  The content should size automatically based on available space and not be restricted to 100px always.  100px could be too long or too short depending on how much space the panelBar has and how many panelBar items are defined.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 01 Jun 2015 Link to this post

    Hello Michelle,

    The discussed behavior is not supported out-of-the-box, but you can pick one of the following techniques:

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

    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