MPDF Not displaying correct CSS

Question

//this is the code at the page that generates pdf

$string = get_include_contents('pdf/draydocument/index.php');

//print_r($string);
$mpdf=new mPDF();
$mpdf->WriteHTML($string);
$mpdf->SetDisplayMode('fullpage');

$mpdf->Output();

.heading {
  font-family: Montserrat, sans-serif;
}

.body {
  margin-top: 29px;
  padding-top: 0px;
  background-color: #fff;
  font-family: 'Varela Round', sans-serif;
  font-weight: 500;
}

.text-block {
  font-family: Montserrat, sans-serif;
}

.text-block-2 {
  font-size: 25px;
}

.text-field {
  margin-right: -453px;
  padding-right: 0px;
  font-size: 11px;
}

.bold-text {
  display: block;
  margin-right: 1200px;
  border: 1px solid #000;
  border-radius: 9px;
  color: #ffa705;
}

.paragraph {
  width: 60%;
  margin-right: 1200px;
  margin-left: auto;
}

.div-block {
  margin: -144px 0px 1px 1200px;
}

.text-block-3 {
  width: 50%;
  margin-right: 300px;
  margin-left: -600px;
}

.heading-2 {
  margin-top: 200px;
}

.heading-3 {
  width: 40%;
  margin-top: 117px;
  margin-right: 400px;
  margin-left: -32px;
  color: #ffa705;
  font-size: 25px;
}

.grid {
  grid-template-areas: "Area";
}

.columns {
  width: 35%;
  border: 1px none #000;
}

.column {
  border: 1px solid #000;
}

.column-2 {
  border: 1px solid #000;
}

.column-3 {
  border: 1px solid #000;
}

.column-4 {
  border: 1px solid #000;
}

.column-5 {
  border: 1px solid #000;
}

.column-6 {
  border: 1px solid #000;
}

.column-7 {
  border: 1px solid #000;
}

.column-8 {
  border: 1px solid #000;
}

.column-9 {
  border: 1px solid #000;
}

.column-10 {
  border: 1px solid #000;
}

.column-11 {
  border: 1px solid #000;
}

.column-12 {
  border: 1px solid #000;
}

.column-13 {
  padding-left: 0px;
}

.columns-2 {
  padding-right: 0px;
}

.column-14 {
  padding-right: 35px;
}

.column-15 {
  height: auto;
  margin-top: 0px;
}

.columns-3 {
  height: 30px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.column-16 {
  height: 30px;
}

.column-17 {
  height: 30px;
}

.column-18 {
  border: 1px solid #000;
}

.column-19 {
  border: 1px solid #000;
}

.column-20 {
  border: 1px solid #000;
}

.column-21 {
  height: 400px;
  border: 1px solid #000;
}

.column-22 {
  height: 400px;
  border: 1px solid #000;
}

.column-23 {
  height: 400px;
  border: 1px solid #000;
}

.image {
  width: 600px;
}

.div-block-2 {
  width: 60px;
}

.text-block-4 {
  width: 40%;
  margin-left: -600px;
}

.columns-4 {
  width: 35%;
}

.columns-5 {
  width: 35%;
}

.columns-6 {
  width: 35%;
}

.columns-7 {
  width: 35%;
}

.columns-8 {
  width: 35%;
}

.text-block-5 {
  font-size: 10px;
}

.bold-text-2 {
  font-size: 10px;
}

.bold-text-3 {
  font-size: 10px;
}






  
  Delivery Order
  
  


  
  
  
  
  
  
  
  
  


  
  123 E 9TH ST, SUITE 332
UPLAND, CA 91786
PHONE: 909-285-2370
EMAIL: ops@freightcube.net
             DRAYAGE DELIVERY ORDER
  
    
      OCEAN CARRIER/SSL :
php code
    
    
      LOCATION/TERMINAL :
php code
    
    
      PORT :
php code
    
  
  
    
      MASTER BOL :
PHP
    
    
      ARRIVAL DATE/CUT OFF DATE :
PHP
    
    
      TRUCKING COMPANY:
PHP
    
  
  
    
      CONTAINER :
PHP
    
    
      HOUSE BOL :
PHP
    
    
      ENTRY NO :
PHP
    
    
      CUSTOMER REFERENCE :
PHP
    
  
  
    
      DELIVERY/PICKUP ADDRESS:
PHP
    
    
      SPECIAL INSTRUCTIONS:
PHP
    
  
  
    
      NO. OF PKGS
    
    
      DESCRIPTION OF GOODS
    
    
      WEIGHT
    
  
  
    
      PHP CODE FOR NO. OF PACKAGES
    
    
      PHP FOR DISCRIPTION
    
    
      PHP FOR WEIGHT
    
  
  RECEIVED IN GOOD ORDER BY :
‍

link to codeI am using mpdf for my php application to generate pdf pages. I recently generated an html page using a drag and drop html builder which also provides source code with css. so i copied the exact css on the page using . When mpdf generates the pdf it is not showing css correctly. it looks like width issues but i tried to reduce width of all divs and still encounter the same problem just with smaller appearing columns. please help. here is how it shows and how it should show

MPDF Not displaying correct CSS

Answers (1)

Related Questions