Jquery mobile 面板和固定位置页眉/页脚

我正在尝试为我的面板使用“显示”动画。但是，当jquerymobile运行动画时，标题不会滑动到面板上，因此标题会稍微与面板重叠。如图所示：

这是我的密码：

<div data-role="page" id="taskdetailspage">

       <div data-role="header" data-id="navbar" data-position="fixed" data-tap-toggle="false">
            <a href="#tasklistpage" data-rel="back" class="ui-btn-left">Back</a>
            <p class="title">Field Service Engineer</p>
            <a href="#taskdetailspanel" class="ui-btn-right">Actions</a>
        </div>

        <div id="taskholder" data-role="content">


        </div>

        <div data-role="content" id="directionsholder"></div> 

        <div data-role="panel" data-theme="a" id="taskdetailspanel" data-position="right" data-display="reveal" 
           data-position-fixed="true">
           <h3>Actions</h3>
           <ul data-role="listview" data-theme="a">
              <li><a href="#updateStatusPopup" id="updateStatusButton" data-rel="popup">Update Task Status</a></li>
              <li><a id="directionsButton" href="#">Get Directions</a></li>
              <li><a href="#dialogcontent" data-rel="popup">Decline Task</a></li>
           </ul>
        </div>

        <div id="updateStatusPopup" data-role="popup" data-theme="a" data-overlay-theme="a" 
            data-transition="fade" data-position-to="window">
           <div data-role="header">
              <h3>Update Task Status</h3>
           </div>

           <div data-role="content">
               <form action="javascript: updateTaskStatus(currentTaskId);">
                  <fieldset data-role="controlgroup">
                     <legend>Current Status:</legend>
                     <input data-theme='a' name="updateStatus" id="arrived" value="Arrived" checked="checked" type="radio">
                     <label for="arrived">Arrived</label>
                     <input data-theme='a' name="updateStatus" id="wip" value="Work in Progress" type="radio">
                     <label for="wip">Work in Progress</label>
                     <input data-theme='a' name="updateStatus" id="completed" value="Complete" type="radio">
                     <label for="completed">Complete</label>
                  </fieldset>
                  <label for="statusNotes">Status Notes:</label>
                  <input name="statusNotes" id="statusNotes" value="" type="text">
                  <fieldset class="ui-grid-a">
                     <div class="ui-block-a"><input type="submit" value="Update" data-theme='a' id='confirmUpdateButton'></div>
                     <div class="ui-block-b"><a data-theme='a' data-role='button' data-rel='back'>Cancel</a></div>     
                  </fieldset>
               </form>
           </div>
        </div>

        <div id="dialogcontent" data-role="popup" data-theme="a" data-overlay-theme="a" 
            data-transition="fade" data-position-to="window">
           <div data-role="header">
              <h3>Confirm Decline Task</h3>
           </div>

           <p>Are you sure you want to decline this task and remove it from your calendar?</p>         

           <fieldset class="ui-grid-a">
              <div class="ui-block-a"><a data-theme='a' href='#' id='confirmDeclineButton' data-role='button'>Decline</a> </div>
              <div class="ui-block-b"><a data-theme='a' href='#' data-role='button' data-rel='back'>Cancel</a></div>       
           </fieldset>
        </div>

现场服务工程师

行动





更新任务状态
当前状态：
到了
正在进行的工作
完成
情况说明：

我发现另外一个问题也有类似的描述，但解决方法是无法理解的

---

提前谢谢

你也应该添加你的自定义CSS，HTML本身并不会导致这个问题。谢谢你，我没有想到会因为某种原因来查看这里。我有一个CSS规则，它改变了标题的最小高度。一旦我删除了这个，动画就如预期的那样工作了。你为什么不为你的页眉使用一些文本，在这种情况下页眉会有一个正确的高度呢？我是。由于另一个原因（我想我是在测试什么），我改变了头球的最小高度，但一直没有摆脱它。