MPDF проблемы с шириной размещенных Див

Question

У меня есть проблема, что я изо всех сил, чтобы решить с MPDF6

У меня есть веб-приложение, созданное с помощью CodeIgniter, который отображает результаты анкетного опроса.

Я создал простые штабелированные гистограммы в html и использовал jquery для анимации баров до их окончательных размеров. Работает нормально, и никаких проблем.

Я хочу, чтобы иметь возможность тиражировать результаты в MPDF, поэтому, используя ту же теорию divs и определяя их соответственно, но на этот раз я устанавливаю ширину как встроенный стиль с использованием php, и в большинстве случаев у меня есть эта работа штраф, однако, если значение = 1, то по какой-либо причине mpdf идет фанки, см. пример изображения ниже;

Example of MPDF issue

Вот пример моего PHP разметки для отчета MPDF

<div class='survey'> 
      <?php $nw = 390; $w = 400; $tot=0; $totpos=0; $score=0; $cat=0; foreach ($categories as $c) : ?> 
      <p class='left question'><?php echo $c->category_name; ?></p> 
      <p class='left perc'><?php echo number_format($summaryAnswers[$cat][6],1); ?>%</p> 
      <p class='left perc'><?php echo number_format($summaryAnswers[$cat][7],2); ?></p> 
      <div style='width: <?php echo $w; ?>px;' class='left chart'> 
       <?php if ($summaryAnswers[$cat][0] > 0) : ?> 
        <div class='left barchart sagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][0]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][0]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][0]; ?></span></div> 
       <?php endif; ?> 

       <?php if ($summaryAnswers[$cat][1] > 0) : ?> 
        <div class='left barchart agree' style='width: <?php $width = $nw * $summaryAnswers[$cat][1]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][1]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][1]; ?></span></div> 
       <?php endif; ?> 

       <?php if ($summaryAnswers[$cat][2] > 0) : ?> 
        <div class='left barchart neither' style='width: <?php $width = $nw * $summaryAnswers[$cat][2]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][2]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][2]; ?></span></div> 
       <?php endif; ?> 

       <?php if ($summaryAnswers[$cat][3] > 0) : ?> 
        <div class='left barchart disagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][3]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][3]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][3]; ?></span></div> 
       <?php endif; ?> 

       <?php if ($summaryAnswers[$cat][4] > 0) : ?> 
        <div class='left barchart sdisagree' style='width: <?php $width = $nw * $summaryAnswers[$cat][4]/$summaryAnswers[$cat][5]; echo $width; ?>px;' tot='<?php echo $summaryAnswers[$cat][5]; ?>' val='<?php echo $summaryAnswers[$cat][4]; ?>' ><span class='label'><?php echo $summaryAnswers[$cat][4]; ?></span></div> 
       <?php endif; ?> 
      </div> 

Я попытался и шириной пикселей и шириной% оба варианта дает мне тот же результат ...

вот html, который генерируется скриптом, вы можете видеть, что значения каждой ширины выглядят правильно

<div class='survey'> 
          <p class='left question'>Organisation and Culture</p> 
      <p class='left perc'>66.7%</p> 
      <p class='left perc'>2.92</p> 
      <div style='width: 400px;' class='left chart'> 
             <div class='left barchart sagree' style='width: 97.5px;' tot='24' val='6' ><span class='label'>6</span></div> 

             <div class='left barchart agree' style='width: 162.5px;' tot='24' val='10' ><span class='label'>10</span></div> 

             <div class='left barchart neither' style='width: 32.5px;' tot='24' val='2' ><span class='label'>2</span></div> 

             <div class='left barchart disagree' style='width: 81.25px;' tot='24' val='5' ><span class='label'>5</span></div> 

             <div class='left barchart sdisagree' style='width: 16.25px;' tot='24' val='1' ><span class='label'>1</span></div> 
           </div> 


      <br class='clear' />  

CSS-код ..

.survey { font-size: 10pt; } 
.survey .question { width: 47%; padding: 5px 0; } 
.survey .perc  { width: 5%; margin: 0; padding: 5px 0; } 
.survey .no   { width: 2%; margin: 0; padding: 5px 0; } 
.survey .chart  { width: 40%; }  
.survey .barchart { padding: 5px 0; } 
.barchart .label { margin: 0 0 0 5px; } 
div.sagree { background: #2DCC00; } 
div.agree { background: #F2E930; } 
div.neither { background: #888; } 
div.disagree{ background: #FFA519; } 
div.sdisagree { background: #FF1919; } 
.right { float: right; } 
.left { float: left; } 
.clear { clear: both; } 

кто получил какие-либо идеи, почему это происходит?

веселит

Answer 1

Я нашел решение, которое работало для меня, через много проб и ошибок ...

Я создал контейнер DIV и установить ширину DIV в% с помощью встроенного CSS, то каждый плавал DIV внутри контейнера, был установлен ширину в% тоже немного как это:

<div style='width: 80%'> 
    <div style='float: left; width: 20%'>Content</div> 
    <div style='float: left; width: 30%'>Content</div> 
    <div style='float: left; width: 40%'>Content</div> 
    <div style='float: left; width: 10%'>Content</div> 
    <div style='float: left; width: 5%'>Content</div> 
    <div style='float: left; width: 15%'>Content</div> 
    <div style='float: left; width: 40%'>Content</div> 
    <div style='float: left; width: 40%'>Content</div> 
</div> 

Answer 2

Я просто наткнулся на одной и той же задачи (положить меньшие ширины к div и MPDF превращение их в 100%).

Моим решением было преобразовать div в таблицу и дать ширину (проценты) каждому td. Работает так, как ожидалось.

ПРИМЕЧАНИЕ. Очевидно, что если содержимое слишком велико, это может привести к расширению расширения td, но даже при этом мы можем иметь mPDF для подгонки/изменения размера содержимого!

Пример:

<table style="width: 100%"> 
    <tr> 
    <td style="width:20%">20</td> 
    <td style="width:40%">40</td> 
    <td style="width:10%">10</td> 
    <td style="width:5%">5</td> 
    <td style="width:25%">25</td> 
    </tr> 
</table>