html - DOMPDF: How to make image posted from user be positioned fixed on top when @page margin-top is also defined by the user? -
i've searched everywhere here in , elsewhere have issue fixed. tips , advise appreciated , in advance. kindly refer sample code below:
#letterheaderdiv{ position: fixed; left: 0px; top: -220px; right: 0px; width: 100%; border: 1px solid red; overflow: hidden; } #actioniteminfo { position: fixed; left: 0px; top: -100px; right: 0px; height: 50px; } #actionitemlettersfooter{ position: fixed; bottom: 0 !important; height: 50px; line-height: 0.5 !important; padding-top: 0.5em; } .bodysection.letter{ top:0; position: relative; line-height:1.5px; }
<div class="contentsection" id="letterprintbody"> <div id="letterheaderdiv"> <table style="top: 0px; padding-bottom:0px; left: 0px ; margin-left: 0px; margin-right: auto; " id="letterheadertable"> <img id="letter_header"> </table> </div> <div class="headsection headsectionactionitem" id="actioniteminfo"> <table style=" padding-bottom:0px; left: 0px ; margin-left: 0px; margin-right: auto; "> <tr> <td> <ul class="details_list "> <li><label>name: </label></li> <li><label>age: </label></li> <li><label>address: </label></li> </ul> </td> </tr> </table> <table style="right:0px ; margin-left: auto; margin-right: 0px; " > <tr> <td> <ul class="details_list "> <li><label>visit date: </label></li> <li><label>sex: </label></li> </ul> </td> </tr> </table> </div> <div class="footersectionnoborder print_only" id="actionitemlettersfooter"> <table style="right:0px ; margin-left: auto; margin-right: 0px;"> <tr> <td> <ul class="details_list "> <li><span id="letterprintaction_physician"></span></li> <li><label class="letter_license_no">license no: </label><span id="letterprintaction_licenseno"></span></li> <li><span id="letterprintaction_ptr"></span></li> <li><span id="letterprintaction_s2"></span></li> </ul> </td> </tr> </table> </div> <div class="bodysection letter"></div> </div>
here's php code printing of pdf:
if(isset($_post['letter_size'])){ $letter_size = $_post['letter_size']; $top_margin = $_post['top_margin']; $right_margin = $_post['right_margin']; $bottom_margin = $_post['bottom_margin']; $left_margin = $_post['left_margin']; $font_size = $_post['font_size']; $letter_head = $_post['letter_head']; if($letter_size == 'bondpaper'){ $html .= '<style>'; $html .= '@page { margin-top: '.$top_margin.'; margin-right: '.$right_margin.'; margin-bottom: '.$bottom_margin.'; margin-left: '.$left_margin.'; width : 8.5in ; height : 11in ; font-size : 10pt !important ; }'; $html .= 'body { }'; // $html .= '#letter_header{ background-image: url('.$letter_head.'); }'; $html .= '.actionitems,.letter{ font-size : '.$font_size.' !important ; } '; $html .= '</style>'; $page_size = array(0,0,612.00,792.00); //bond paper page size 8.5" x 11" }else if($letter_size == 'rx_pad'){ $html .= '<style>'; $html .= '@page {margin-top: '.$top_margin.'; margin-right: '.$right_margin.'; margin-bottom: '.$bottom_margin.'; margin-left: '.$left_margin.'; width : 8.5in ; height : 11in ; font-size : 10pt !important ; }'; $html .= 'body { }'; // $html .= '#letter_header{ background-image: url('.$letter_head.'); }'; $html .= '.actionitems,.letter{ font-size : '.$font_size.' !important ; } '; $html .= '</style>'; $page_size = array(0,0,396.00,612.00); //rx pad page size 6" x 9" }}
for php code above, don't know do/how positioned image on top when @page margin-top set user (e.g. @page{margin-top: 3in}, @page{margin-top: 2in} ). everytime test different image having not having same dimension, image positioned overlapped @ ul class="details_list".
wiki
Comments
Post a Comment