список автозаполнения jquery не прилипает к родительскому элементу ввода

у меня возникли некоторые трудности с адаптацией автозаполнения jqueryUI к макету CSS моего сайта.

всякий раз, когда я вызываю функцию автозаполнения в поле ввода, список открывается, как ожидалось. Поскольку вход живет в div с фиксированной высотой, когда пользователь прокручивает этот div, список автозаполнения остается фиксированным.

кто-нибудь сталкивался с этим и знает решение? Эта проблема не возникает, если родительский div не фиксируется по высоте.

Я сделал макет jsfiddle здесь:http://jsfiddle.net/NSm7f/1/

вот мой пример кода:

<div class="root">
    <div id="Header">
        <div class='heading'>Test</div>
    </div>
    <div class='box' id="Wrapper">
        <div class='box' id="Leftpanel">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>Autocomplete box:
            <input id="box1">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>Another autocomplete:
            <input id="box2">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>
            <p>some text</p>
                <h1>Other stuff</h1>


            <br>
            <br>
        </div>
        <!--Leftpanel-->
        <div class='box' id="Rightpanel">
            <form>
                <textarea rows="33" cols="45"></textarea>
                <br>
            </form>
        </div>
        <!--End rightpanel-->
    </div>
    <!--wrapper-->
</div>
<!--root-->

мой JS (да, у меня есть jQueryUI и загруженный по умолчанию jQueryUI css):

 $("#box1").autocomplete({
     source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
 });

 $("input#box2").autocomplete({
     source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
 });

и мой css:

.box {
    float: left;
}
#root {
    max-width: 1200px;
    margin: 0 auto;
}
#Wrapper {
    width: 100%;
    display: table;
}
#Leftpanel, #Rightpanel {
    vertical-align: top;
}
#Leftpanel {
    width: 57%;
    display: table-cell;
    height:750px;
    color: #B29D72;
    overflow:scroll;
    background-color: #272F44;
    -moz-border-radius: 2px;
    border-radius: 5px;
    padding: 1%;
    margin:0.5%
}
#Rightpanel {
    width: 37%;
    display: table-cell;
    height: 750px;
    color: #B2A283;
    background-color: #0D162C;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1%;
    margin:0.5%
}
#Sidebar {
    width: 15%;
    background-color: #B2A283;
    color: #0D162C;
    padding:1%;
    margin:0.5%;
    -moz-border-radius: 2px;
    border-radius: 5px;
}
#Sidebar a:link {
    color: #FFF4CB;
}
#Footer {
    width: 97%;
    height: auto;
    background-color: #B2A283;
    color: #0D162C;
    padding: 1%;
    margin: 0.5%;
    -moz-border-radius: 2px;
    border-radius: 5px;
}
#Footer a:link {
    color: #FFF4CB;
    padding-left: 5px;
    padding-right: 5px;
}
#Footer A:hover {
    color: #CA9221;
}
#Sidebar .slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}