jQuery ui accordion with panel that contains scrolling content and a fixed header

Question

I would like to have an accordion with a panel that has a fixed header with a date picker in it and scrollable content while the accordion has fillspace set to true. So the accordion panel called panel-hmmm should not scroll but the div inside called scrollable-content should.

<div id="accordion-west">
    <h3>
        <a href="#">hmmm</a>
    </h3>
    <div class="panel-hmmm">
        <div class="date-picker">
        </div>
        <div class="scrollable-content">
            <b>Accordion inside a layout-pane</b>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum
                neque a velit laoreet dapibus. Etiam eleifend tempus pharetra.</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
        </div>
    </div>
    <h3>
        <a href="#">chips</a>
    </h3>
    <div>
        <p style="font-weight: bold;">
            Sed Non Urna</p>
        <p>
            Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit,
            dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus
            libero ac justo.</p>
        <p>
            Vivamus non quam. In suscipit faucibus urna.</p>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.panel-hmmm .date-picker').datepicker();
        $("#accordion-west").accordion({
            fillSpace: true
        });
    });
</script>

Answer 1

I'm not quite sure what you want exactly, but try adding this CSS. Adjust the height to fit inside the area you want it.

.panel-hmmm {
 overflow: scroll;
 height: 300px;
}

Replace .panel-hmmm with .ui-accordion-content to effect all of the accordion panels.

---

Update: Given that you want the datepicker always visible when the panel is open, I'd switch the CSS to:

.scrollable-content {
 overflow: scroll;
 height: 300px;
}

The height of this scrollable content needs to be set otherwise it will maintain it's full height. In a demo I set up, the accordion panel would go off the page without any CSS, which is why I initially set the .panel-hmmm to a vertain height.