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

Full Height PanelBar

3 Answers 311 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 18 Jan 2012, 04:59 PM
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? 

3 Answers, 1 is accepted

Sort by
0
John DeVight
Top achievements
Rank 1
answered on 18 Jan 2012, 08:00 PM
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
0
Michelle
Top achievements
Rank 1
answered on 27 May 2015, 11:49 PM
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.
0
Dimo
Telerik team
answered on 01 Jun 2015, 01:40 PM
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!
Tags
PanelBar
Asked by
Dave
Top achievements
Rank 1
Answers by
John DeVight
Top achievements
Rank 1
Michelle
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or