разрыв страницы после не работает после использования абсолютного элемента позиции в качестве родителя - PullRequest
0 голосов
/ 06 сентября 2018

Я пытаюсь напечатать несколько динамически генерируемых таблиц на каждой странице. Существует контейнер class="tabulation", который содержит все таблицы. Также ставится .page -break после каждого стола.

Но проблемы заключаются в следующем: - Если я использую position: absolute в классе .tabulation, .page-break не работает. - Если я удаляю absolute , содержимое перемещается вправо, а не в центр. - Я пытался поместить контейнер .tabulation в контейнер position: relative. Но он перекрывал все таблицы на первой странице.

Я использую Materialise CSS в своем проекте. Версия браузера 68.0.3440.106 (Официальная сборка) (64-разрядная версия) ОС Windows 10

CSS

@media print{
    body *{visibility:hidden}
    article .tabulation *{visibility:visible}
    article .tabulation{
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: 99%
    }
    .page-break{page-break-after:always;visibility:visible}
}

@page{
    size: auto;
    margin: 50px auto 0;
}

HTML

<div class="tabulation"> <!-- Main container -->
    <!-- Page 1 contents -->
    <div class="row">
    <div class="col s12">
      <div class="clearfix">
        <img src="logo.jpg">
        <div class="right right-align">
          <h1 class="big-5 mb-0">tITLE</h1>
          <p>Some text</p>
        </div>
      </div>
    </div>
    <div class="col s7">
      <p class="px-30">Some text</p>
    </div>
    <div class="col s5 mb-30" style="font-size:1rem">
    <p class="px-30">Some text</p>
    </div>
    <div class="col s12">
      <table class="table striped">

      </table>
    </div>
  </div>
  <div class="page-break"></div> <!-- Page break -->

  <!-- Page 2 contents -->
  <div class="row">
    <div class="col s12">
      <div class="clearfix">
        <img src="logo.jpg">
        <div class="right right-align">
          <h1 class="big-5 mb-0">tITLE</h1>
          <p>Some text</p>
        </div>
      </div>
    </div>
    <div class="col s7">
      <p class="px-30">Some text</p>
    </div>
    <div class="col s5 mb-30" style="font-size:1rem">
    <p class="px-30">Some text</p>
    </div>
    <div class="col s12">
      <table class="table striped">

      </table>
    </div>
  </div>
  <div class="page-break"></div> <!-- Page break -->

  <!-- Page 3 contents -->
  <div class="row">
    <div class="col s12">
      <div class="clearfix">
        <img src="logo.jpg">
        <div class="right right-align">
          <h1 class="big-5 mb-0">tITLE</h1>
          <p>Some text</p>
        </div>
      </div>
    </div>
    <div class="col s7">
      <p class="px-30">Some text</p>
    </div>
    <div class="col s5 mb-30" style="font-size:1rem">
    <p class="px-30">Some text</p>
    </div>
    <div class="col s12">
      <table class="table striped">

      </table>
    </div>
  </div>
  <div class="page-break"></div> <!-- Page break -->
</div>

Заранее спасибо.

...