Bootstrap multiselect dropdown inside uncollapsed panel is cut off

I have a collapsible accordion panel that is expanded with a single bootstrap multiselect dropdown box. It has many options. The expanded accordion panel opens to show the dropdown box but cuts off the options underneath it. I have tried adjusting the z-index in css but that didn't work.

Here is the code:

<!-- language: lang-html -->

<div class="panel-collapse collapse">
    <div class="panel-body">
        <p>Category provided by the borrower for the loan request.</p>
        <select class="multiselect" multiple="multiple" name="purpose">
            <option value="car">car</option>
            <option value="credit card">credit card</option>
            <option value="debt consolidation">debt consolidation</option>
            <option value="educational">educational</option>
            <option value="home improvement">home improvement</option>
            <option value="house">house</option>
            <option value="major purchase">major purchase</option>
            <option value="medical">medical</option>
            <option value="moving">moving</option>
            <option value="other">other</option>
            <option value="renewable energy">renewable energy</option>
            <option value="small business">small business</option>
            <option value="vacation">vacation</option>
            <option value="wedding">wedding</option>
        </select>
    </div>
</div>

Any ideas on how to get this to work?

This has to do with the way accordion content is presented. It doesn't do so hot with dynamic content.

In order to prevent it from truncating content, you can set overflow: visisble:

<!-- language: lang-css -->

.panel-group .panel {
  overflow: visible;
}

Demo in jsFiddle