Относительные / абсолютные позиции Dompdf с процентами, не действующими должным образом - PullRequest
Новая
       155

Относительные / абсолютные позиции Dompdf с процентами, не действующими должным образом

0 голосов
/ 06 августа 2020

Я использую dompdf в laravel, в моем PDF-файле есть раздел, в котором мне нужно создать график, используя переданную в лезвие переменную.

У меня есть расчет, превращающий эту переменную в процент от его максимального числа: 

$bar_percentage = (($bar - 5) * 100) / (20);

В результате у меня есть процентное число, которое мне нужно для создания высоты столбца на гистограмме. У меня был другой способ сделать это раньше, используя flexbox, когда мы использовали wkhtmltopdf напрямую, но это было проблематично для разных сред, поэтому мы добавили dompdf, и мне нужно было реорганизовать лезвие pdf для использования таблиц. Моя идея заключалась в том, чтобы создать фон графика, используя таблицу из 3 строк, и абсолютно расположить полосу внутри нее, примерно так: 

  <div class="graph-container">
    <div class="bar" style="height:<?= $bar_percentage; ?>%"></div>
    <table>
      <tr>
        <td style="background-color: green;"></td>
      </tr>
      <tr>
        <td style="background-color: yellow;"></td>
      </tr>
      <tr>
        <td style="background-color: red;"></td>
      </tr>
    </table>
  </div>

, а затем абсолютно расположить полосу внутри таблицы: 

<style>
  .graph-container {
    width: 300px;
    height: 300px;
    position: relative;
  }

  .graph-container table td {
    height: 100px;
    width: 100px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .bar {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 30px;
    background-color: black;
  }
</style>

Но происходит что-то сверхъестественное. Во-первых, «низ» помещает и таблицу, и полосу ниже graph-container (но не внизу родительского элемента graph-container, даже ниже этого!)

Также , высота полосы должна быть в процентах от высоты graph-container, но она намного больше, чем контейнер графика, когда я устанавливаю этот процент на 100%, и я не могу понять, с каким элементом он сравнивает свой процент !!!

любая помощь приветствуется! Спасибо.

Определенно что-то странное происходит с Dompdf и абсолютным / относительным позиционированием, но я не могу сказать, как это обойти. Если бы я мог гарантировать, что высота полосы была бы хотя бы в процентах от правильной высоты, я мог бы взломать ее до правильного положения, но размер полосы также неправильный.

1 Ответ

0 голосов
/ 08 августа 2020

Это проблема с DomPdf, доступен только пиксель, посмотрите документацию.

...