Проблема с фиксированным расширением заголовка datatables, перемещающимся из правильной позиции

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

Это выглядит как сбой на странице, хотя он исправляется, когда пользователь снова прокручивает мышь.

Код для div с кнопками:

<div id="container_btn_float" class="btnContainer" style="position:fixed; z-index:110; top:50px" >
                    <div class="row">
                        <div class="form-group col-md-12">
                            <!--<label class="">Approve &nbsp &nbsp</label>-->
                            <input type="button" class="btn btn-info" id="btn_ApproveSelected" value="Approve">
                        <input type="button" class="btn btn-success" id="btn_ApproveAll" value="Approve All">
                        <input type="button" class="btn btn-danger" id="btn_UnApproveSelected" value="Decline">
                        <input type="button" class="btn btn-primary" id="btn_ExpandAll" value="Expand All" onclick="expandAll()">
                        <input type="button" class="btn btn-warning" id="btn_ContractAll" value="Contract All" onclick="contractAll()">
                        <!--<input type="button" class="btn btn-warning" id="btn_UnApproveAll" value="All">-->

                    </div>

                   iv>
            </div>

Код для datatable:

    new $.fn.dataTable.FixedHeader(summaryTable, {
    });

Код для фиксированного div при прокрутке (с кнопками):

        jQuery(function($) {
          function fixDiv() {
           var $cache = $('#getFixed');
        if ($(window).scrollTop() > 100)
           $cache.css({
           'position': 'fixed',
           'top': '10px'
      });
      else
        $cache.css({
          'position': 'relative',
          'top': 'auto'
         });
       }

      $(window).scroll(fixDiv);
      fixDiv();
    });

scroll button jquery datatables fixed-header-tables
person nagorgeous    schedule 28.08.2015    source источник
comment
Я добавил второй контейнер div с кнопкой, такой же, как и другие кнопки, но я установил для его отображения значение none и присвоил ему CSS, чтобы он имел размер, равный размеру div, содержащего div, который в конечном итоге перемещался и оставлял место, где он изначально был поставлен.   -  person nagorgeous    schedule 29.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я добавил второй контейнер div с кнопкой, такой же, как и другие кнопки, но я установил для его отображения значение none и присвоил ему CSS, чтобы он имел размер, равный размеру div, содержащего div, который в конечном итоге перемещался и оставлял место, где он изначально был поставлен.

          <div class="form-group col-md-4" id="container2_btn_stay" style="height:76px;width:90px">
                  <!--Just some hidden text-->
                  <input type="button" class="btn btn-warning" id="btn_HiddenBox" value="HiddenBox" style="display:none">
          </div>
person nagorgeous    schedule 29.08.2015
comment
секрет в том, чтобы всегда сохранять одинаковую высоту от верхней части страницы. - person nagorgeous; 29.08.2015