I used this template to create an accordion in Bootstrap.

I will probably have a lot more elements and can't figure out how to set the max height for the menu before the contents of the sublinks div bee scrollable, since I have a limited window.

JSFiddle

I already tried applying max height to both #menu and the .list-group.panel

I used this template to create an accordion in Bootstrap.

I will probably have a lot more elements and can't figure out how to set the max height for the menu before the contents of the sublinks div bee scrollable, since I have a limited window.

JSFiddle

I already tried applying max height to both #menu and the .list-group.panel

• javascript
• html
• css
• twitter-bootstrap
• electron

• Can you put up a jsfiddle of your adapted version of this code? – Tim Sheehan Commented Nov 22, 2015 at 2:40
• Also, you'll need to put overflow-y: auto on the container in addition to a max-height to make it scroll (if it's not applied already). – Tim Sheehan Commented Nov 22, 2015 at 2:41
• @Dontfeedthecode I added the fiddle – Anže Jenšterle Commented Nov 22, 2015 at 2:44

3 Answers 3

Here's an example of how to get your scrolling working with the code you've provided.

div.sublinks.collapse {
    max-height: 200px;
    overflow-y: scroll;
}

http://jsfiddle/bjpLL5xn/3/

The issue you'll run into is that when expanded the Javascript is going to make the animation "jump".

One item is 38px so you can set a max-height to the .sublinks div to the amount of divs you want to be shown so if you want two make it 76px or you want 3 make it 114px so on so on. Also i added overflow: overlay; so you won't see the items outside the accordion bit it still adds a scrollbar.

Jsfiddle

.panel-group .panel+.panel {
margin-top: 3px !important;
max-height: 90% !important; //90% height of your parent div and if it crosses y-axis scroller will be shown 
overflow-y: auto !important;
}

Always use % and not px... you will have resolution issues later.