jQuery Forum

I'm trying to use the Position Method on table elements within an iframe in order to shift the elements away from the edge of the iframe if they're too close. I'm using this for faux Select elements that are near the bottom of the page, but instead of shifting the elements with collision: "fit", they're moving to the top of the page.

I tested collision: "flip" just to be sure, and was surprised to discover that it didn't position anything and allowed the element to be cut off. I've also tried adding an option for 'within'  (using the div for the page content) but that didn't help either.

JS

1.       $("#dropdown_container1").position({
2.             my: "left top",
3.             at: "left bottom",
4.             of: "#dropdown_box1",
5.             collision: "fit"  
   
6.         });
7. $(function () {
8.     $("#dropdown_box1").click(function () {
9.         $("#select1").show();
10.     });
11. });
12. $(function () {
13.     $("#select1").menu();
14. });
    

HTML

1. <table>
2.     <tr>
3.         <td>
4.             <div id="dropdown_box1" class="dropdown_box"><span>1st Priority</span>/div>
5.             <div class="dropdown_container" id="dropdown_container1">
6.             <ul id="select1">
7.             <!-- Several List items --!> 
   
8.             </ul>     
   
9.             </div>
10.        </td>
11.    </tr>
12. </table>

CSS

1. .dropdown_box {display:block; border: 1px solid #d3d3d3;}   
   
2. .dropdown_container {position:relative;}                  
   
3. .dropdown_container ul  {display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}
   
4. .dropdown_container ul li ul { display:none; position:absolute; top:0px; left:0px; list-style:none; border:1px solid #d3d3d3;}