Home/ Questions/Q 6637393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:18:33+00:00

I have a table with two large cells, the left cell containing two drop-downs

  • 0

I have a table with two large cells, the left cell containing two drop-downs and the JQuery UI button that I’m having trouble with, and the right cell contains a list that’s generated from an AJAX database query. As the list grows, the button moves further and further upwards, to the point where it begins to block one of the drop-downs. When I mouse-over the button, it moves down the page a few centimeters. No matter how big the list is, this button always moves down upon mouse-over, and I can’t figure out why or how to prevent this from happening.

JQuery:

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />  
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

$(document).ready(function(){
   $("#createReport").button({
      icons: {
         primary: "ui-icon-document"
      }
   });
});

</head>

Table:

<table style="width:600px;table-layout:fixed;"><tr>
    <td style="height:10px;background-color:#3882C7;color:#FFD23A;"><b>Create New Reports</b></td>
    <td style="height:10px;background-color:#3882C7;color:#FFD23A;"><b>Reports Completed for this Month - <span id="section"></span></b></td></tr>
    <tr>
    <td style="padding:20px;">
            <p>Court:&nbsp;<select id="newReportsDD">
            <option>Criminal</option>
            <option>Civil</option>
            <option>Family</option>
            <option>Business</option>
            </select></p>
            <p><?php echo judgesDropDown('newReportsJudgeDD'); ?></p><br/>
            <p><button id = "createReport">Create/Edit Report</button></p>
        </div></td>
    <td style="padding:10px;"><div id ="judgesCompleted"><!-- AJAX GENERATED LIST --></div>
    </td></tr>
</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
     <td id="container" style="padding:20px;">
        <p>Court:&nbsp;<select id="newReportsDD">
        <option>Criminal</option>
        <option>Civil</option>
        <option>Family</option>
        <option>Business</option>
        </select></p>
        <p><?php echo judgesDropDown('newReportsJudgeDD'); ?></p><br/>
        <p><button id = "createReport">Create/Edit Report</button></p>
    </div></td>

    #container {vertical-align: top;
    text-align: left;}

    • 0