上面的元素JQuery手风琴丢失填充

Question

我有一个jquery对话框，其中包含一个jQuery手风琴。当我点击手风琴标题展开不同的部分时，手风琴上方的元素会在动画期间失去其填充。结果是这些元素在动画期间向左移动。以下是有问题的HTML/JS代码片段。

有什么想法？

HTML：

<div id="bodyDiv"> 
    <!-- Dialog --> 
    <div id="patientPopup" title="Patient:" class="ui-widget"> 
     <table style="width: 100%"> 
      <tr> 
       <td class="AppointmentImage"> 
        <img src="images/John-Petrucci-tn.jpg" alt="Patient Photo"> 
       </td> 
       <td> 
        <b>Name:</b>&nbsp;Smith,&nbsp;Sally <b>DOB:</b>&nbsp;02/15/1984 <br /> 
        <b>SSN:</b> 999-99-9999 <b>Address:</b> 123 Main St Nashville, TN 37204 
       </td> 
      </tr> 
      <tr> 
       <td colspan="2" style="width: 100%"> 
        <!--Accordion--> 
        <div id="patientSummary"> 
         <h3><a href="#">Encounters</a></h3> 
         <div> 
          <table class="PatientSummary"> 
           <tr> 
            <th>12/03/2011</th> 
            <td> 
             Office visit - this is text for the office visit. some notes perhaps. 
            </td> 
           </tr> 
           <tr> 
            <th>10/16/2011</th> 
            <td> 
             GYN visit - this is text to fill some space. 
            </td> 
           </tr> 
          </table> 
         </div> 
         <h3><a href="#">Alerts</a></h3> 
         <div> 
          <ul> 
           <li>Diabetic</li> 
           <li>Due for FluShot</li> 
          </ul> 
         </div> 
         <h3><a href="#">Labs/Radiology</a></h3> 
         <div> 
          <table style="vertical-align: text-top;"> 
           <tr> 
            <th>Date</th> 
            <th>Lab</th> 
            <th>Result</th> 
           </tr> 
           <tr> 
            <td>12/03/2011</td> 
            <td>Blood Panel</td> 
            <td>N</td> 
           </tr> 
           <tr> 
            <td>12/03/2011</td> 
            <td>Pregnancy Test</td> 
            <td>Y</td> 
           </tr> 
           <tr> 
            <td>12/03/2011</td> 
            <td>Blood Panel</td> 
            <td>N</td> 
           </tr> 
           <tr> 
            <td>12/03/2011</td> 
            <td>Pregnancy Test</td> 
            <td>Y</td> 
           </tr> 
           <tr> 
            <td>12/03/2011</td> 
            <td>Blood Panel</td> 
            <td>N</td> 
           </tr> 
           <tr> 
            <td>12/03/2011</td> 
            <td>Pregnancy Test</td> 
            <td>Y</td> 
           </tr> 
          </table> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <button id="showPatient">Show Patient</button> 
</div> 

的JavaScript：

$("#patientPopup").dialog({ 
     autoOpen: false, 
     modal: true, 
     height: 530, 
     width: 600, 
     draggable: false, 
     resizable: false, 
     open: function() { 
      $("#patientSummary").accordion({ 
       fillSpace: true, 
       autoHeight: true 
      }); 
     } 
    }); 

    $("#showPatient").button().click(
     function() { 
      $("#patientPopup").dialog("open"); 
     } 
    ); 

任何帮助，将不胜感激。谢谢！

Answer 1

解决方案非常简单。我最终将图像和文字放在与手风琴完全分开的表格中。

从来没有确定为什么顶级元素失去了他们的填充虽然...