Top, left positioning is not working in mPDF

Question

I want to set the position of my content element using css, but it is not working. Even mPDF supports this function. Did I miss anything? I tried to use float-left, margin-left and top to align but it can only position one of the element --> not good enough

mPDF:

$content = ' <div id="id_3" ondrop="drop(event)" ondragover="allowDrop(event)"
class="relative" style="position:relative;"> 
<img src="../temp/test.png" height="100" width="100" class="draggable ui-widget-content" id="qr"/>
 <label class="draggable ui-widget-content clickableLabel" class="field_name" >Name: [Person Name]</label>
    <label class="draggable ui-widget-content clickableLabel" class="field_id" >ID: [Person ID]</label>

</div>';


$style = '#id_3 #qr{ position:absolute; top:10px; left:30px; }
         #id_3 #field_name{ position:absolute; top:26px; left:168.8125px; } 
         #id_3 #field_id{ position:absolute; top:63px; left:186.65625px; } ;'



 $pdf = new Pdf([

           // set to use core fonts only
           'mode' => Pdf::MODE_CORE,
           // A4 paper format
           'format' => Pdf::FORMAT_A4,
           // portrait orientation
           'orientation' => Pdf::ORIENT_PORTRAIT,
           // stream to browser inline
           'destination' => Pdf::DEST_BROWSER,
           // your html content input
           'content' => $content,
           // format content from your own css file if needed or use the
           // enhanced bootstrap css built by Krajee for mPDF formatting
           'cssFile' => '@vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css',
           // any css to be embedded if required
           'cssInline' => $style,
           //$style,//'.kv-heading-1{font-size:18mm}'
           // set mPDF properties on the fly
           'options' => ['title' => 'ID Card'],
           // call mPDF methods on the fly
           'methods' => [
              // 'SetHeader'=>['Krajee Report Header'],
              // 'SetFooter'=>['{PAGENO}'],
           ],
           'marginTop' => 2,//1
           'marginBottom' => 1,
           'marginLeft' => 2,
           'marginRight' => 0,

        ]);

Answer 1

Your original piece of code:

$content = ' <div id="id_3" ondrop="drop(event)" ondragover="allowDrop(event)"
class="relative" style="position:relative;"> 
Here as you didnt closed text tags, $style was ignored
$style = #id_3 #qr{ position:absolute; top:10px; left:30px; }
     #id_3 #field_name{ position:absolute; top:26px; left:168.8125px; } 
     #id_3 #field_id{ position:absolute; top:63px; left:186.65625px; } 

<img src="../temp/test.png" height="100" width="100" class="draggable ui-widget-content" id="qr"/>
<label class="draggable ui-widget-content clickableLabel" class="field_name" >Name: [Person Name]</label>
<label class="draggable ui-widget-content clickableLabel" class="field_id" >ID: [Person ID]</label>

</div>';

The issue resides on where you close your text tags

My correction:

$content = ' <div id="id_3" ondrop="drop(event)"  ondragover="allowDrop(event)"
class="relative" style="position:relative;"> ';

$style = '#id_3 #qr{ position:absolute; top:10px; left:30px; }
     #id_3 #field_name{ position:absolute; top:26px; left:168.8125px; } 
     #id_3 #field_id{ position:absolute; top:63px; left:186.65625px; }

<img src="../temp/test.png" height="100" width="100" class="draggable ui-widget-content" id="qr"/>
<label class="draggable ui-widget-content clickableLabel" class="field_name" >Name: [Person Name]</label>
<label class="draggable ui-widget-content clickableLabel" class="field_id" >ID: [Person ID]</label>

</div>';

mPDF ignores php tags