javascripthtmlcsswkhtmltopdfwkhtmltoimage

Wkhtmltopdf is not generating Signature with CSS "float : left" in <p> tag, which is displaying in HTML

I am converting HTML to pdf using wkhtmltopdf tool version 0.12.6-1 (with patched QT).

HTML contains so-ordinates to generate Signature at last. When I load HTML in browser, it displays Signature, but when I convert HTML to pdf using wkhtmltopdf tool with below command, pdf doesn't contains Signature.

c:\Program Files\wkhtmltopdf\bin>wkhtmltopdf.exe myLocalPath\my.html myLocalPath\my.pdf

While tracing issue, I found that in HTML one CSS is available float:left; which causes the issue. You can found

tag with CSS

<p style=" white-space: pre-wrap; float:left;">

Under above parent tag, co-ordinates are given to generate signature.

If I remove only float:left; CSS from above

tag, then Signature is generated in PDF but not on the left side. It generates signature in center.

Please any one can help, If I need to change CSS to generate signature at left side or any option is available with wkhtmltopdf command to overcome this problem.

use command to generate pdf from both below HTMLs

wkhtmltopdf.exe myLocalPath\my.html myLocalPath\my.pdf

Below HTML contains "float:left" CSS with

tag - and result is PDF not generating signature

<meta charset="UTF-8"><style type="text/css">div.formBuilder{margin:10px;white-space:normal}div.formBuilder .col-xs-1,div.formBuilder .col-sm-1,div.formBuilder .col-md-1,div.formBuilder .col-lg-1,div.formBuilder .col-xs-2,div.formBuilder .col-sm-2,div.formBuilder .col-md-2,div.formBuilder .col-lg-2,div.formBuilder .col-xs-3,div.formBuilder .col-sm-3,div.formBuilder .col-md-3,div.formBuilder .col-lg-3,div.formBuilder .col-xs-4,div.formBuilder .col-sm-4,div.formBuilder .col-md-4,div.formBuilder .col-lg-4,div.formBuilder .col-xs-5,div.formBuilder .col-sm-5,div.formBuilder .col-md-5,div.formBuilder .col-lg-5,div.formBuilder .col-xs-6,div.formBuilder .col-sm-6,div.formBuilder .col-md-6,div.formBuilder .col-lg-6,div.formBuilder .col-xs-7,div.formBuilder .col-sm-7,div.formBuilder .col-md-7,div.formBuilder .col-lg-7,div.formBuilder .col-xs-8,div.formBuilder .col-sm-8,div.formBuilder .col-md-8,div.formBuilder .col-lg-8,div.formBuilder .col-xs-9,div.formBuilder .col-sm-9,div.formBuilder .col-md-9,div.formBuilder .col-lg-9,div.formBuilder .col-xs-10,div.formBuilder .col-sm-10,div.formBuilder .col-md-10,div.formBuilder .col-lg-10,div.formBuilder .col-xs-11,div.formBuilder .col-sm-11,div.formBuilder .col-md-11,div.formBuilder .col-lg-11,div.formBuilder .col-xs-12,div.formBuilder .col-sm-12,div.formBuilder .col-md-12,div.formBuilder .col-lg-12{position:static;padding:0px !important;text-align:left;min-height:50px}@media (min-width: 992px){div.formBuilder .col-xs-1,div.formBuilder .col-sm-1,div.formBuilder .col-md-1,div.formBuilder .col-lg-1,div.formBuilder .col-xs-2,div.formBuilder .col-sm-2,div.formBuilder .col-md-2,div.formBuilder .col-lg-2,div.formBuilder .col-xs-3,div.formBuilder .col-sm-3,div.formBuilder .col-md-3,div.formBuilder .col-lg-3,div.formBuilder .col-xs-4,div.formBuilder .col-sm-4,div.formBuilder .col-md-4,div.formBuilder .col-lg-4,div.formBuilder .col-xs-5,div.formBuilder .col-sm-5,div.formBuilder .col-md-5,div.formBuilder .col-lg-5,div.formBuilder .col-xs-6,div.formBuilder .col-sm-6,div.formBuilder .col-md-6,div.formBuilder .col-lg-6,div.formBuilder .col-xs-7,div.formBuilder .col-sm-7,div.formBuilder .col-md-7,div.formBuilder .col-lg-7,div.formBuilder .col-xs-8,div.formBuilder .col-sm-8,div.formBuilder .col-md-8,div.formBuilder .col-lg-8,div.formBuilder .col-xs-9,div.formBuilder .col-sm-9,div.formBuilder .col-md-9,div.formBuilder .col-lg-9,div.formBuilder .col-xs-10,div.formBuilder .col-sm-10,div.formBuilder .col-md-10,div.formBuilder .col-lg-10,div.formBuilder .col-xs-11,div.formBuilder .col-sm-11,div.formBuilder .col-md-11,div.formBuilder .col-lg-11,div.formBuilder .col-xs-12,div.formBuilder .col-sm-12,div.formBuilder .col-md-12,div.formBuilder .col-lg-12{float:left}}div.formBuilder .form-group{padding:10px;margin-bottom:0}div.formBuilder .row .add-row-wrapper{padding:5px 10px;font-size:12px;color:#666}div.formBuilder .add-row{font-size:12px;color:#666}div.formBuilder .add-row:focus,div.formBuilder .add-row:hover{text-decoration:none}div.formBuilder .form-inline,div.formBuilder .form-group,div.formBuilder .input-group,div.formBuilder .input-group-addon,div.formBuilder .form-control{text-align:inherit;font-size:inherit;color:inherit;height:auto;text-decoration:inherit;font-weight:inherit;font-style:inherit}div.formBuilder .form-group label{text-align:inherit;font-size:inherit;color:inherit;height:auto;display:block;font-weight:inherit;text-decoration:inherit;word-wrap:break-word;word-break:break-word}div.formBuilder .form-group p{word-wrap:break-word;word-break:break-word}.red{color:red}.formBuilder{background:white}div.formBuilder .checkbox,div.formBuilder .radio{padding-left:0}div.formBuilder .row-cls{display:flex;flex-direction:row;flex-wrap:wrap}div.formBuilder .btn-group.column-cls{min-width:130px}div.formBuilder .btn-group label.label-cls{display:-webkit-box;max-width:100%;line-height:1.6;-webkit-line-clamp:2;-webkit-box-GEEent:vertical;overflow:hidden;text-overflow:ellipsis;white-space:initial;padding:5px 10px;cursor:pointer;min-height:40px}div.formBuilder .btn-group.line-button{background:#FFFFFF;border:1px solid #7A7A7A;box-sizing:border-box;border-radius:0;text-shadow:none}div.formBuilder .btn-group.fill-button{border-radius:0;background:linear-gradient(180deg, #fff 0%, #E6E6E6 100%);border:1px solid #CDCDCD;box-sizing:border-box;box-shadow:0px 4px 4px rgba(0,0,0,0.25)}div.formBuilder .btn-group.fill-button.checked{border:1px solid #071529;box-sizing:border-box}div.formBuilder .btn-group.fill-button.checked:after{color:#0A74B8;font-family:FontAwesome;content:"\f0d8";font-size:15px;position:absolute;bottom:-7px;left:40%}div.formBuilder .btn-group.line-button.checked{background:#0A74B8;border-color:#163448;color:#fff;text-shadow:none}div.formBuilder .f-radio-button input,div.formBuilder .fill-button input,div.formBuilder .line-button input,div.formBuilder .f-checkbox-button input,div.formBuilder .flat-checkbox-button input,div.formBuilder .flat-radio-button input{display:none}div.formBuilder label.label-cls.f-radio-button,div.formBuilder label.label-cls.f-checkbox-button,div.formBuilder label.label-cls.flat-checkbox-button,div.formBuilder label.label-cls.flat-radio-button{cursor:pointer;user-select:none;padding-left:24px}div.formBuilder label.f-radio-button:before{content:"";width:18px;height:18px;border-radius:50%;background:#071529;font-size:0;position:absolute;top:-2px;left:10px;transform:translate(-50%, 50%)}div.formBuilder label.f-radio-button:after{content:"";width:0;height:0;border-radius:50%;background:#071529;position:absolute;top:8px;left:10px;transform:translate(-50%, 50%)}div.formBuilder input:checked+label.f-radio-button:after{width:8px;height:8px;background:linear-gradient(45deg, #6CCCD9 0%, #BBE4F0 100%)}div.formBuilder label.flat-radio-button:before{content:"";width:18px;height:18px;border-radius:50%;border:3px solid #D7DCDE;font-size:0;position:absolute;top:-2px;left:10px;transform:translate(-50%, 50%)}div.formBuilder label.flat-radio-button:after{content:"";width:0;height:0;border-radius:50%;background:#3498DB;font-size:0;position:absolute;top:10px;left:10px;transform:translate(-50%, 50%)}div.formBuilder input:checked+label.flat-radio-button:before{border:3px solid #3498DB}div.formBuilder input:checked+label.flat-radio-button:after{width:6px;height:6px}div.formBuilder label.f-checkbox-button:before{content:"";width:18px;height:18px;border-radius:3px;background:#071529;font-size:0;position:absolute;top:-2px;left:10px;transform:translate(-50%, 50%)}div.formBuilder input:checked+label.f-checkbox-button:after{content:"\f00c";color:#6CCCD9;font-family:FontAwesome;font-size:14px;position:absolute;top:5px;left:3px}div.formBuilder label.flat-checkbox-button:before{content:"";width:18px;height:18px;border-radius:3px;border:3px solid #D7DCDE;font-size:0;position:absolute;top:-2px;left:10px;transform:translate(-50%, 50%)}div.formBuilder label.flat-checkbox-button:after{content:"";width:0;height:0;position:absolute;top:-2px;left:10px;transform:translate(-50%, 50%)}div.formBuilder input:checked+label.flat-checkbox-button:before{border:3px solid #3498DB;background:#3498DB}div.formBuilder input:checked+label.flat-checkbox-button:after{content:"\f00c";height:12px;width:14px;color:#fff;font-family:FontAwesome;font-size:14px}.formScrollWrap,div.formBuilder .row{float:none !important}div.formBuilder .row{position:relative;min-width:auto}div.formBuilder .row.overflow-x{overflow-x:hidden;overflow-y:hidden}div.formBuilder .row.layout{margin-top:10px;margin-bottom:10px}div.formBuilder .row.layout-flex{padding:0px !important}div.formBuilder .row.layout-flex>div.layout-cell{padding-top:0px}div.formBuilder .row>.separator,div.formBuilder .row>div>.separator{height:100%;float:left;position:absolute;top:0}div.formBuilder .row>div{padding-top:12px}div.formBuilder .row .row{margin-left:0px;margin-right:0px}.remove-date img{margin-top:-13px}.left-content .left-wrapper{display:block}div.formBuilder datepicker,div.formBuilder datepicker>.ang-date-controls{display:block;float:none;position:relative;text-align:inherit;font-size:inherit;color:inherit;height:auto;text-decoration:inherit;margin-bottom:0px}div.formBuilder datepicker>.ang-date-controls>input[type="text"].ang-datepciker{width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);text-align:inherit;font-size:inherit;color:inherit;height:auto;text-decoration:inherit;font-weight:inherit;font-style:inherit}div.formBuilder datepicker>.ang-date-controls>img{border-left:1px solid #ccc;padding:8px;margin-left:-35px}div.formBuilder .ang-date-controls .remove-date{margin-left:-55px;line-height:13px;position:absolute;top:10px}div.formBuilder .date-picker-wrapper{position:relative;font-size:inherit}div.formBuilder .date-picker-wrapper i.fa{position:absolute;font-size:inherit;top:10px;right:12px}div.formBuilder .date-picker-wrapper input{padding-right:30px}div.formBuilder .table>thead>tr>th,div.formBuilder .table>tbody>tr>th,div.formBuilder .table>tfoot>tr>th,div.formBuilder .table>thead>tr>td,div.formBuilder .table>tbody>tr>td,div.formBuilder .table>tfoot>tr>td{padding:0px}div.formBuilder .table-border-none{border:none !important;border-color:transparent !important;border-width:0 !important;margin-bottom:0px;table-layout:fixed;width:100%;max-width:100%;border-spacing:0}@media (max-width: 992px){div.formBuilder .col-xs-5,div.formBuilder .col-sm-5,div.formBuilder .col-md-5,div.formBuilder .col-lg-5{width:auto !important}}div.formBuilder datepicker input[readonly]{cursor:pointer;background-color:white}div.formBuilder .table{margin-bottom:0px;table-layout:fixed}div.formBuilder table.table.widthAuto{table-layout:auto;min-width:max-content}div.formBuilder .table tr{background:none}div.formBuilder .div-table{display:table;width:100%;border-bottom:1px solid #ccc;border-left:1px solid #ccc}div.formBuilder .div-row{display:table-row;margin:0}div.formBuilder .div-column{display:table-cell;float:none;border-right:1px solid #c2c2c2;border-top:1px solid #c2c2c2}div.formBuilder .table-settings{position:relative;display:none}div.formBuilder .repeating-table-row:hover .table-settings{display:block}div.formBuilder .table-settings button{height:27px;position:absolute;top:-9px;left:-9px;font-size:16px}div.formBuilder .table-settings ul{background-color:white;border:1px solid #ccc;margin:0;list-style-type:none;position:absolute;padding:5px;box-shadow:1px 1px 3px;width:100px;z-index:1}div.formBuilder .table-settings ul li{padding:5px;font-size:12px}div.formBuilder .table-settings ul li a{color:black}div.formBuilder .break-word{word-wrap:break-word;white-space:normal;word-break:break-word;display:block}div.formBuilder label.required span:after{content:'*';color:red}div.formBuilder .form-group .radio label,div.formBuilder .form-group .checkbox label{display:inline-block}div.formBuilder input[type="text"].ng-invalid,div.formBuilder input[type="number"].ng-invalid,div.formBuilder textarea.ng-invalid,div.formBuilder select.ng-invalid{border:1px solid #c00}div.formBuilder .map{height:315px}div.formBuilder .marker-reset{position:absolute;right:20px;z-index:1;top:80px}div.formBuilder .searchBox,div.formBuilder select,div.formBuilder input[type="text"],div.formBuilder input[type="number"],div.formBuilder textarea{padding:6px 12px !important;font-size:inherit;font-family:inherit}div.formBuilder .col-xs-5,div.formBuilder .col-sm-5,div.formBuilder .col-md-5,div.formBuilder .col-lg-5{width:20%}div.formBuilder .col-xs-7,div.formBuilder .col-sm-7,div.formBuilder .col-md-7,div.formBuilder .col-lg-7{width:14.2857%}div.formBuilder .col-xs-8,div.formBuilder .col-sm-8,div.formBuilder .col-md-8,div.formBuilder .col-lg-8{width:12.5%}div.formBuilder .col-xs-9,div.formBuilder .col-sm-9,div.formBuilder .col-md-9,div.formBuilder .col-lg-9{width:11.11%}div.formBuilder .col-xs-10,div.formBuilder .col-sm-10,div.formBuilder .col-md-10,div.formBuilder .col-lg-10{width:10%}div.formBuilder .col-xs-11,div.formBuilder .col-sm-11,div.formBuilder .col-md-11,div.formBuilder .col-lg-11{width:9.09%}div.formBuilder .ta-scroll-window>.ta-bind{max-height:500px;overflow:auto;word-wrap:break-word;word-break:break-word}div.formBuilder .ta-scroll-window>.ta-bind p{text-align-last:auto}div.formBuilder p.richtextarea p{text-align-last:auto}.pac-container{z-index:9999}div.formBuilder .sp-preview{height:16px}div.formBuilder .sp-replacer{padding:0}div.formBuilder ol,div.formBuilder ul{padding:0 0 0 40px}div.formBuilder .ta-editor.form-control{padding:0;border-top-left-radius:0}div.formBuilder .ta-editor.form-control div[contenteditable]{padding:5px}div.formBuilder div[text-angular-toolbar] .btn-group .btn{border-radius:0;border-bottom:0;padding:6px 10px}div.formBuilder div[text-angular]{padding:0px;box-shadow:none;border:none}div.formBuilder .ta-editor.form-control .popover-content .btn-group .btn:last-child{display:none}div.formBuilder blockquote{border-left:none;margin:0 0 0 40px;padding:0}div.formBuilder label.required:after{content:'*';color:red}div.formBuilder .hide{display:none !important}div.formBuilder p{margin:0px;line-height:normal}div.formBuilder .table .table{background-color:inherit}div.formBuilder .btn-switch{position:relative;display:block;cursor:pointer;border-radius:40px;border:1px solid}div.formBuilder .btn-switch-circle{position:absolute;top:0;left:0;display:block;background-color:#fff;border-radius:40px}div.formBuilder .btn-switch-circle--on{left:auto;right:0}div.formBuilder .label-switch{position:relative;bottom:7px}div.formBuilder a.hyperlink-ctrl:hover{text-decoration:underline;cursor:pointer}div.formBuilder .dropdown-header{display:block;padding:5px 12px;font-size:12px;line-height:1.42857143;color:#555;white-space:nowrap;font-weight:bold}div.formBuilder .btn-group.dropdown.filter-dd{width:100%}div.formBuilder button.btn.btn-default.dropdown-toggle{width:100%;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}div.formBuilder button.btn.btn-default.dropdown-toggle span{text-overflow:ellipsis}.bootstrap-datetimepicker-widget table td.old,.bootstrap-datetimepicker-widget table td.new{background:inherit;text-decoration:none}.bootstrap-datetimepicker-widget div.datepicker.col-md-6{width:50%;display:inline-block}.bootstrap-datetimepicker-widget div.timepicker.col-md-6{width:50%;display:inline-block}@media (max-width: 991px){.bootstrap-datetimepicker-widget div.datepicker.col-md-6{width:100%;display:inline-block}.bootstrap-datetimepicker-widget div.timepicker.col-md-6{width:100%;display:inline-block}}.closeText:before{content:"Close"}.clearText:before{content:"Clear"}.todayText:before{content:"Go to today"}.closeText,.clearText,.todayText{border:none;color:#000}.bootstrap-datetimepicker-widget table td span.closeText:hover,.bootstrap-datetimepicker-widget table td span.clearText:hover,.bootstrap-datetimepicker-widget table td span.todayText:hover{text-decoration:underline;color:#337ab7;cursor:pointer;background:none}table.uib-timepicker .uib-time.am-pm button.btn.btn-default{color:#fff;background-color:#337ab7;margin-left:5px}table.uib-timepicker input{font-size:14px}.datetime-picker-dropdown button.btn{border:none;background:none;font-size:14px}.datetime-picker-dropdown button.btn:hover,.datetime-picker-dropdown button.btn:active,.datetime-picker-dropdown button.btn:focus,.datetime-picker-dropdown button.btn:focus-visible{border:none;outline:none;box-shadow:none;text-decoration:underline;color:#337ab7}.datetime-picker-dropdown{z-index:1101;min-width:max-content}#wrap-textarea{resize:none;overflow-x:scroll;white-space:nowrap;height:35px;scrollbar-width:none}#wrap-textarea::-webkit-scrollbar{display:none}myCompany-signature{position:relative}.range-datalist{position:relative;display:flex;justify-content:space-between}.range-step{font-size:1rem}#leftWrapper input[type="checkbox"],input[type="radio"]{visibility:visible !important;display:block !important;opacity:0;width:0px;height:0px}#leftWrapper input[type='radio']:focus+label{border:1px solid #8c8c8c !important;background-color:#e6e5e5;border-radius:4px}#leftWrapper input[type='checkbox']:focus+label{border:1px solid #8c8c8c !important;background-color:#e6e5e5;border-radius:4px}#leftWrapper .hyperlink-ctrl{visibility:visible !important}#leftWrapper a.hyperlink-ctrl:focus{border:1px solid #8c8c8c !important;background-color:#e6e5e5;border-radius:4px;outline:none}
</style><style type="text/css">@media print{div.formBuilder *{-ms-text-size-adjust:100%}div.formBuilder table{width:100%;max-width:100%;min-width:100%;table-layout:fixed;margin-bottom:0px;border-spacing:0;border-collapse:collapse}div.formBuilder table.table.widthAuto{table-layout:auto;min-width:auto}div.formBuilder table.table-border-none{border:none}div.formBuilder table.table-border-none>tbody>tr>td,div.formBuilder table.table-border-none>tbody>tr>th{border:2px solid transparent}div.formBuilder table,div.formBuilder td{mso-table-lspace:0pt !important;mso-table-rspace:0pt !important}div.formBuilder img{-ms-interpolation-mode:bicubic}div.formBuilder .row p{word-wrap:break-word;word-break:break-word;margin:0px;margin-bottom:4px;font-size:inherit}div.formBuilder .row a.button{border-radius:4px;padding:6px}}div.formBuilder .row.layout-flex{padding:0px !important}div.formBuilder .row{margin:0px !important;padding:0px !important;background-color:transparent}div.formBuilder div.layout-flex .item.x_layout-cell{width:auto !important}div.formBuilder table{width:100%;max-width:100%;min-width:100%;table-layout:fixed;margin-bottom:0px;border-spacing:0;border-collapse:collapse}div.formBuilder table.table.widthAuto{table-layout:auto}div.formBuilder table.table.x_widthAuto{table-layout:auto}div.formBuilder table tr td,div.formBuilder table tr th{vertical-align:top}div.formBuilder table.table-border-none{border:none}div.formBuilder table.table-border-none>tbody>tr>td,div.formBuilder table.table-border-none>tbody>tr>th{border:2px solid transparent}div.formBuilder .row p{word-wrap:break-word;word-break:break-word;margin:0px;margin-bottom:4px;font-size:inherit}
</style><link type="text/css" rel="stylesheet" href="/appbuilder/113505/template.css"></link><div style="display:none;"><fixedfield>GEE_FORMTITLE</fixedfield><sp_fixedfield>GEE_FORMTITLE</sp_fixedfield></div><div class="formBuilder"><div class="container-fluid"><div class="row"><table class="table-border-none"><tr><td style="font-family: Helvetica; font-size: 16px; background-color: #ffffff !important; background-color: #ffffff; font-weight: normal; font-style: normal; text-decoration: none; text-align-last: left; text-align: left; color: #000000 !important; color: #000000; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;"><p class="break-word">Title</p><p style=" white-space: pre-wrap;">Test</p></td></tr></table></div><div class="row"><table class="table-border-none"><tr><td style="font-family: Helvetica; font-size: 14px; background-color: #ffffff !important; background-color: #ffffff; font-weight: normal; font-style: normal; text-decoration: none; text-align-last: left; text-align: left; color: #000000 !important; color: #000000; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;"><p class="break-word">Signature</p><p style=" white-space: pre-wrap; float:left; "><?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="84" viewBox="0 0 245 84" ><path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="rgb(0, 0, 0)" fill="none" d="M 1 31 l 1 1"/><path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="rgb(0, 0, 0)" fill="none" d="M 1 31 c 0.04 -0.14 0.93 -5.56 2 -8 c 2.5 -5.69 5.46 -14.1 9 -17 c 2.4 -1.96 9.23 -1.22 13 -1 c 1.29 0.08 2.99 1.13 4 2 c 1.13 0.97 2.45 2.55 3 4 c 1.96 5.14 3.6 11.2 5 17 c 0.96 3.98 1.84 8.08 2 12 c 0.16 3.88 0.04 9.74 -1 12 c -0.44 0.95 -4.03 1.49 -5 1 c -1.11 -0.56 -2.32 -3.24 -3 -5 c -1.59 -4.1 -3.65 -9.01 -4 -13 c -0.26 -2.99 0.99 -6.81 2 -10 c 1.29 -4.06 3.01 -8.19 5 -12 c 2 -3.82 6.7 -10.65 7 -11 c 0.1 -0.11 -1 2.69 -1 4 c 0 6.03 -0.01 13.12 1 19 c 0.57 3.33 2.41 6.82 4 10 c 1.39 2.79 3.02 5.86 5 8 c 2.1 2.26 5.26 4.78 8 6 c 2.8 1.24 6.94 1.78 10 2 c 1.24 0.09 3.24 -0.18 4 -1 c 2.9 -3.13 7.17 -8.93 9 -13 c 0.81 -1.8 0.32 -4.79 0 -7 c -0.33 -2.3 -1.22 -4.66 -2 -7 c -0.58 -1.73 -1.13 -3.61 -2 -5 c -0.69 -1.1 -1.92 -2.23 -3 -3 c -1.14 -0.82 -4.05 -2.42 -4 -2 c 0.31 2.51 4.32 17.29 7 26 c 1.39 4.5 3.53 8.48 5 13 c 2.97 9.14 10.34 23.18 8 27 c -2.27 3.71 -25.56 4.07 -27 4 c -0.45 -0.02 4.52 -3.92 7 -5 c 4.84 -2.1 10.48 -3.67 16 -5 c 11.44 -2.75 23.16 -4.43 34 -7 c 1.4 -0.33 2.98 -1.11 4 -2 c 1.45 -1.27 3.05 -3.25 4 -5 c 0.94 -1.72 1.84 -4.14 2 -6 c 0.15 -1.79 -0.39 -4.17 -1 -6 c -0.67 -2.02 -1.82 -4.43 -3 -6 c -0.63 -0.84 -2.32 -2.2 -3 -2 c -1.07 0.31 -3.87 2.93 -4 4 c -0.12 0.95 1.9 2.9 3 4 c 0.8 0.8 2.27 2.18 3 2 c 1.3 -0.33 4.34 -2.46 5 -4 c 1.03 -2.41 1.49 -7.22 1 -10 c -0.39 -2.23 -2.31 -5.18 -4 -7 c -2.69 -2.88 -6.48 -5.65 -10 -8 c -3.45 -2.3 -7.29 -4.52 -11 -6 c -2.73 -1.09 -7.7 -2.78 -9 -2 c -1.14 0.68 -1.15 5.49 -1 8 c 0.17 2.87 0.91 6.27 2 9 c 1.48 3.71 3.73 7.59 6 11 c 1.67 2.51 3.81 5.14 6 7 c 1.92 1.62 4.71 3.46 7 4 c 2.84 0.67 7.09 0.65 10 0 c 2.6 -0.58 5.97 -2.24 8 -4 c 2.59 -2.24 4.83 -5.82 7 -9 c 2.9 -4.26 6.99 -8.82 8 -13 c 1.06 -4.39 0.42 -11.92 -1 -16 c -0.88 -2.52 -5.83 -7 -7 -7 c -0.86 0 -2.32 5.05 -2 7 c 0.54 3.24 3.07 7.79 5 11 c 0.9 1.5 2.55 3.44 4 4 c 2.32 0.89 6.72 1.61 9 1 c 1.96 -0.52 4.33 -3.16 6 -5 c 1.54 -1.7 2.8 -3.9 4 -6 c 1.49 -2.61 3.22 -5.45 4 -8 c 0.44 -1.43 -0.14 -5.14 0 -5 c 0.24 0.24 1.76 5.52 3 8 c 1.05 2.09 2.52 4.15 4 6 c 1.16 1.45 2.49 2.97 4 4 c 5.64 3.85 13.99 6.44 18 11 c 4.67 5.32 9.95 17.61 11 22 c 0.25 1.04 -3.58 3.17 -5 3 c -3.17 -0.37 -11.26 -4.44 -12 -5 c -0.24 -0.18 2.98 -0.29 4 -1 c 5.09 -3.56 10.44 -8.94 16 -13 c 3.15 -2.3 6.53 -4.17 10 -6 c 2.93 -1.54 5.95 -3.08 9 -4 l 11 -2"/></svg></p></td></tr></table></div></div></div><script src='https://myCompanytest.myCompany.com/scripts/jquery-1.9.1.js'></script><script src='https://myCompanytest.myCompany.com/scripts/jSignature.min.js'></script><script src='https://myCompanytest.myCompany.com/scripts/InfoJet.js'></script><script>$(document).ready(function(){InfoJet_Init();});window.onload = function(){function setTextAreaHeight(){var txtarea = document.querySelectorAll("textarea");for(var i=0; i < txtarea.length; i++){txtarea[i].style.height = txtarea[i].scrollHeight;}}setTextAreaHeight();function changeImgSrc(){var img = document.querySelectorAll("img");for(var i=0; i < img.length; i++){var oldSrc = img[i].getAttribute('src');if(oldSrc.indexOf('http') === -1){img[i].setAttribute('src', 'https://myCompanytest.myCompany.com' + oldSrc );}}}changeImgSrc();}</script><style type='text/css'>#xdoc_view textarea{ overflow-y : hidden !important; white-space: pre-wrap !important;}#xdoc_view .xdDTPicker{display:block!important;}#xdoc_view td.xdTableContentCell span.xdRichTextBox{height:auto!important;width:99%!important;min-height:21px;}#xdoc_view select,#xdoc_view textarea,#xdoc_view input[type="text"],#xdoc_view input[type="password"],#xdoc_view input[type="datetime"],#xdoc_view input[type="datetime-local"],#xdoc_view input[type="date"],#xdoc_view input[type="month"],#xdoc_view input[type="time"],#xdoc_view input[type="week"],#xdoc_view input[type="number"],#xdoc_view input[type="email"],#xdoc_view input[type="url"],#xdoc_view input[type="search"],#xdoc_view input[type="tel"],#xdoc_view input[type="color"],#xdoc_view .uneditable-input{display:inline-block;position:relative;padding:0;margin-bottom:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;font-weight:normal;}#xdoc_view textarea,#xdoc_view input[type="text"]{padding-left:7px!important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}#xdoc_view input[readonly],#xdoc_view select[readonly],#xdoc_view textarea[readonly]{cursor:default;background-color:white;box-shadow:none;}#xdoc_view textarea.xdTextBox[readonly]{white-space:pre-wrap!important;resize:none;border:0;}#xdoc_view .xdRichTextBox{min-height:16px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:auto;}#xdoc_view select.hdnAbsExpdtrObj{z-index:99;position:absolute;display:none;}#xdoc_view textarea.xdTextBox{word-wrap:break-word;}.LOR-ER-DREQ .xdBehavior_Select{font-size:12px!important;}#xdoc_view span.xdMultiSelectList[disabled="true"]{opacity:.6;}#xdoc_view span.xdMultiSelectList[disabled="true"] input,#xdoc_view img.xdLinkedPicture[disabled="true"]{pointer-events:none;}#xdoc_view .ppmtDataMainRow .optionalPlaceholder{width:25%!important;}.ipad #wrap{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}#xdoc_view a.xdPictureButton[disabled]{opacity:.6;cursor:default;}@media print{#xdoc_view table{page-break-inside:auto;}#xdoc_view table tr{page-break-inside:auto;page-break-after:auto;}body:not(.ipad) #wrap{overflow-y:visible!important;}}#xdoc_view span.xdExpressionBox[style*="WRITING-MODE:tb-rl"],#xdoc_view span.xdExpressionBox[style*="WRITING-MODE:\ tb-rl"],#xdoc_view span.xdExpressionBox[style*="writing-mode:tb-rl"],#xdoc_view span.xdExpressionBox[style*="writing-mode:\ tb-rl"]{margin-left:-5px;-webkit-writing-mode:vertical-rl;-ms-writing-mode:vertical-rl;}#xdoc_view *[style*="FONT-SIZE:x-small"],#xdoc_view *[style*="FONT-SIZE:\ x-small"],#xdoc_view *[style*="font-size:x-small"],#xdoc_view *[style*="font-size:\ x-small"]{font-size:10pt!important;}#xdoc_view *[style*="FONT-SIZE:xx-small"],#xdoc_view *[style*="FONT-SIZE:\ xx-small"],#xdoc_view *[style*="font-size:xx-small"],#xdoc_view *[style*="font-size:\ xx-small"]{font-size:8pt!important;}#xdoc_view div#divXdocFreezPanes td.tdXdocFreez,#xdoc_view div#divXdocFreezPanes .trXdocFreez td,#xdoc_view #divFreezeColumnContent .locked{box-shadow:1px 1px 0 #000;-webkit-box-shadow:1px 1px 0 #000;-moz-box-shadow:1px 1px 0 #000;outline:1px solid #000;}#divXdocFreezPanes tr>td{border-left:0 solid #000!important;}.ppmtHeaderRowMain span,.ppmtHeaderRowLast span{display:inline-block;}#xdoc_view input[disabled],#xdoc_view select[disabled]{color:#939393!important;cursor:text;text-shadow:0 1px grey;}#xdoc_view input[type="checkbox"]{margin:1px;vertical-align:middle;}#xdoc{line-height:normal;}#xdoc_view .xdRichTextBox p{padding:0;margin:2px 0;font-size:10pt;font-family:Verdana;}#xdoc_view .xdRichTextBox p.MsoNormal{display:inline-block;width:100%;}#xdoc_view span.xdExpressionBox{display:inline-block;}#xdoc_view span.xdRichTextBox blockquote{border-style:none;padding:0 0 0 15px;margin:0 0 20px;}#xdoc_view .xdRichTextBox *{text-indent:0!important;line-height:normal;}#xdoc_view hr{font-size:1px;}</style>

Now, just remove float:left; CSS from code

<p style=" white-space: pre-wrap; float:left; ">

and then on generating Pdf after removes "float:left" CSS. We get signature in PDF

Solution

  • If you specify width and height for that p tag, using the SVG dimentions, it should be ok.

    <p style="width: 245px; height: 84px;">