Help

DiscussCategory: Feature requestsIssue with HTML to PDF converter
Jean-Fran├žois asked 1 week ago

Hello,

I am using the following route of the API to convert some html content to a PDF file => https://api.getbee.io/v1/message/pdf

I noticed that there is an issue with columns when converting HTML content to PDF format. As we can see in the attached screenshot, the html columns disappear in the PDF file.

Is there any way to fix this issue ?

Thanks for your help,

Jean-Francois

HTML source file below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!–<link href="https://scs-dev1.s3.amazonaws.com/fonts/0cb14ece-c283-465a-8479-b0c2f29cea68/DINNextLTPro-Bold.css" rel="stylesheet" type="text/css"><link href="https://scs-dev1.s3.amazonaws.com/fonts/e46b146a-d879-4c63-8470-1eaf8afb6c98/MinionPro-Regular.css" rel="stylesheet" type="text/css"><link href="https://scs-dev1.s3.amazonaws.com/fonts/a2f29116-44df-490e-b525-feb47299eb27/Trade+Gothic+LT+Bold+Oblique.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet" type="text/css"><link href="https://scs-dev1.s3.amazonaws.com/fonts/0a61c22e-f9ff-4c00-9c6e-79076f85a8e0/Acrom-Thin.css" rel="stylesheet" type="text/css"><link href="https://dev.smartcontentsuite.com/bundles/admin/fuse/assets/custom/css/beeFree.dev.css" rel="stylesheet" type="text/css"><link href="https://scs-dev1.s3.amazonaws.com/fonts/b6ec61e3-fbb4-438c-a338-83ca3f7c7327/IndieFlower-Regular.css" rel="stylesheet" type="text/css"><!–<style type="text/css">body {margin: 0;padding: 0;}table,td,tr {vertical-align: top;border-collapse: collapse;}* {line-height: inherit;}a[x-apple-data-detectors=true] {color: inherit !important;text-decoration: none !important;}<style type="text/css" id="media-query">@media (max-width: 620px) {.block-grid,.col {min-width: 320px !important;max-width: 100% !important;display: block !important;}.block-grid {width: 100% !important;}.col {width: 100% !important;}.col>div {margin: 0 auto;}img.fullwidth,img.fullwidthOnMobile {max-width: 100% !important;}.no-stack .col {min-width: 0 !important;display: table-cell !important;}.no-stack.two-up .col {width: 50% !important;}.no-stack .col.num4 {width: 33% !important;}.no-stack .col.num8 {width: 66% !important;}.no-stack .col.num4 {width: 33% !important;}.no-stack .col.num3 {width: 25% !important;}.no-stack .col.num6 {width: 50% !important;}.no-stack .col.num9 {width: 75% !important;}.video-block {max-width: none !important;}.mobile_hide {min-height: 0px;max-height: 0px;max-width: 0px;display: none;overflow: hidden;font-size: 0px;}.desktop_hide {display: block !important;max-height: none !important;}}<body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #f3f3f3;"><table class="nl-container" style="table-layout: fixed; vertical-align: top; min-width: 320px; Margin: 0 auto; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f3f3f3; width: 100%;" cellpadding="0" cellspacing="0" role="presentation" width="100%" bgcolor="#f3f3f3" valign="top"><tr style="vertical-align: top;" valign="top"><td style="word-break: break-word; vertical-align: top;" valign="top"><div style="background-color:transparent;"><div class="block-grid " style="Margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #ffffff;"><div style="border-collapse: collapse;display: table;width: 100%;background-color:#ffffff;"><div class="col num12" style="min-width: 320px; max-width: 600px; display: table-cell; vertical-align: top; width: 600px;"><div style="width:100% !important;"><div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 0px;"><!–<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.2;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;"><div style="line-height: 1.2; font-size: 12px; color: #555555; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 14px;"><p style="font-size: 14px; line-height: 1.2; word-break: break-word; text-align: right; mso-line-height-alt: 17px; margin: 0;"><span style="font-size: 20px;">News Article<!–<div style="background-color:transparent;"><div class="block-grid " style="Margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #e3e4e9;"><div style="border-collapse: collapse;display: table;width: 100%;background-color:#e3e4e9;"><div class="col num12" style="min-width: 320px; max-width: 600px; display: table-cell; vertical-align: top; width: 600px;"><div style="width:100% !important;"><div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"><!–<div style="color:#555555;font-family:undefined, Arial, ‘Helvetica Neue’, Helvetica, sans-serif;line-height:1.5;padding-top:15px;padding-right:15px;padding-bottom:5px;padding-left:15px;"><div style="line-height: 1.5; font-size: 12px; font-family: undefined, Arial, ‘Helvetica Neue’, Helvetica, sans-serif; color: #555555; mso-line-height-alt: 18px;"><p style="line-height: 1.5; word-break: break-word; font-family: undefined, Arial, ‘Helvetica Neue’, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;">Preheader<p style="line-height: 1.5; word-break: break-word; text-align: justify; font-family: undefined, Arial, ‘Helvetica Neue’, Helvetica, sans-serif; mso-line-height-alt: 18px; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue cursus interdum. Pellentesque auctor nisi eget felis pharetra, ut tristique purus accumsan. Sed eget pulvinar elit. Vivamus scelerisque id purus vitae mollis. Etiam sapien mauris.<!–<div style="background-color:transparent;"><div class="block-grid " style="Margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #ffffff;"><div style="border-collapse: collapse;display: table;width: 100%;background-color:#ffffff;"><div class="col num12" style="min-width: 320px; max-width: 600px; display: table-cell; vertical-align: top; width: 600px;"><div style="width:100% !important;"><div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"><!–<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.5;padding-top:0px;padding-right:15px;padding-bottom:0px;padding-left:15px;"><div style="line-height: 1.5; font-size: 12px; color: #555555; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px;"><p style="line-height: 1.5; word-break: break-word; mso-line-height-alt: 18px; margin: 0;"> <p style="line-height: 1.5; word-break: break-word; font-size: 14px; mso-line-height-alt: 21px; margin: 0;"><span style="font-size: 14px;"><span style="color: #003366;">LOREM IPSUM DOLOR SIT AMET<p style="line-height: 1.5; word-break: break-word; font-size: 14px; mso-line-height-alt: 21px; margin: 0;"><span style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue cursus interdum. Pellentesque auctor nisi eget felis pharetra, ut tristique purus accumsan. Sed eget pulvinar elit. Vivamus scelerisque id purus vitae mollis. Etiam sapien mauris.<p style="line-height: 1.5; word-break: break-word; mso-line-height-alt: 18px; margin: 0;"> <p style="line-height: 1.5; word-break: break-word; font-size: 14px; mso-line-height-alt: 21px; margin: 0;"><span style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue cursus interdum. Pellentesque auctor nisi eget felis pharetra, ut tristique purus accumsan. Sed eget pulvinar elit. Vivamus scelerisque id purus vitae mollis. Etiam sapien mauris.<table class="divider" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" role="presentation" valign="top"><tr style="vertical-align: top;" valign="top"><td class="divider_inner" style="word-break: break-word; vertical-align: top; min-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding-top: 15px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;" valign="top"><table class="divider_content" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed; vertical-align: top; border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-top: 1px solid #E4E4E4; width: 100%;" align="center" role="presentation" valign="top"><tr style="vertical-align: top;" valign="top"><td style="word-break: break-word; vertical-align: top; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top"><!–<div style="background-color:transparent;"><div class="block-grid two-up" style="Margin: 0 auto; min-width: 320px; max-width: 600px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; background-color: #ffffff;"><div style="border-collapse: collapse;display: table;width: 100%;background-color:#ffffff;"><div class="col num6" style="max-width: 320px; min-width: 300px; display: table-cell; vertical-align: top; width: 300px;"><div style="width:100% !important;"><div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"><!–<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.5;padding-top:0px;padding-right:30px;padding-bottom:5px;padding-left:15px;"><div style="line-height: 1.5; font-size: 12px; color: #555555; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px;"><p style="line-height: 1.5; word-break: break-word; font-size: 14px; mso-line-height-alt: 21px; margin: 0;"><span style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue cursus interdum. Pellentes auctor nisi eget felis pharetra, ut tristique purus accumsan. Sed eget pulvinar.<div class="button-container" align="left" style="padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;"><div style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#cb2b5b;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;width:auto; width:auto;;border-top:1px solid #cb2b5b;border-right:1px solid #cb2b5b;border-bottom:1px solid #cb2b5b;border-left:1px solid #cb2b5b;padding-top:0px;padding-bottom:0px;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:30px;padding-right:30px;font-size:16px;display:inline-block;"><span style="font-size: 16px; line-height: 2; word-break: break-word; mso-line-height-alt: 32px;">CTA<!–<div class="col num6" style="max-width: 320px; min-width: 300px; display: table-cell; vertical-align: top; width: 300px;"><div style="width:100% !important;"><div style="border-top:0px solid transparent; border-left:0px solid transparent; border-bottom:0px solid transparent; border-right:0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"><!–<div style="color:#555555;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;line-height:1.5;padding-top:0px;padding-right:5px;padding-bottom:5px;padding-left:30px;"><div style="line-height: 1.5; font-size: 12px; color: #555555; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 18px;"><p style="line-height: 1.5; word-break: break-word; font-size: 14px; mso-line-height-alt: 21px; margin: 0;"><span style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue cursus interdum. Pellentes auctor nisi eget felis pharetra, ut tristique purus accumsan. Sed eget pulvinar.<div class="button-container" align="left" style="padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:30px;"><div style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#cb2b5b;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;width:auto; width:auto;;border-top:1px solid #cb2b5b;border-right:1px solid #cb2b5b;border-bottom:1px solid #cb2b5b;border-left:1px solid #cb2b5b;padding-top:0px;padding-bottom:0px;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:30px;padding-right:30px;font-size:16px;display:inline-block;"><span style="font-size: 16px; line-height: 2; word-break: break-word; mso-line-height-alt: 32px;">CTA<!–

Your Answer