How to set a specific height for a PanelBar?

Question

Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?

Answer 1

Assuming that you have your panelbar defined as a ul, something like:

    <ul id="panelbar">
      <li class="k-state-active">
        <span class="k-link k-state-selected">My Teammates</span>
        <div style="padding: 10px;">
          <div class="teamMate">
            <img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
            <h2>Andrew Fuller</h2>
            <p>Team Lead</p>
          </div>
          <div class="teamMate">
            <img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
            <h2>Nancy Leverling</h2>
            <p>Sales Associate</p>
          </div>
          <div class="teamMate">
            <img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
            <h2>Robert King</h2>
            <p>Business System Analyst</p>
          </div>
        </div>
      </li>
      <li>
        Projects
        ...
      </li>
    </ul>

You should define a CSS style as:

#panelbar {
    height: 300px;
    overflow-y: scroll;
}

See an example here: http://trykendoui.telerik.com/@OnaBai/ifus

Answer 2

The solution above scrolls the entire control. Here's how to scroll the panel's items.

Click here for the Dojo example