EVOLUTION-NINJA

Edit File: add_print.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="<?php echo base_url('bootstrap.min.js');?>"></script>
    <title>Document</title>
</head>
<style>
    .barcode {
        /*height: 192px;*/
        /*width: 384px;*/
         height: 336px;
        width: 672px;
        /*border: 2px solid black;*/
        border-radius: 10px;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        margin-top: -50px;
    }
    
    body{
            font-family: Arial, Helvetica, sans-serif;
    }
    P{
       font-size: 20px;
    font-weight: 700;
    }
    img {
    position: relative;
    top: -25px;
    left: 15px;
    width: 80%;
    height:100px;
}
.rotate {
        /**/
        /*transform-origin: top left;*/
        /*page-break-after: always; */
        /*margin-top: 180px !important;*/
        /*margin-left: -120px !important;*/
      }
.scan_paragraph p{
    font-size: 13px;
    font-weight: 700;
}
    
    .row{
    margin-top: 0px;
    margin-left: 3px;
}

@media print {
    .barcode {
        /*height: 2in;*/
        /*width: 5.6in;*/
        height: 50.8mm;
        width: 101.6mm;
        width: fit-content !important;
       margin-top: -25px !important;
       margin-left:-25px !important;

}
    img{
        margin-left:-20px;
        height: auto;
        margin-top:-15px;
        /*font-size:10px !important;*/
        width: 100%;
    }
    .scan_paragraph p{
    font-size: 12px;
    font-weight: 700;
    position: relative;
    top:-25px;
}
.second_top{
     position: relative;
    top:-10px;
}
.scan_3drive{
    /*margin-top: -20px;*/
    /*position: relative;*/
    /*top:-50px;*/
    
}
.pck_right{
     position: relative;
    left:60px;
}
.pck_right1{
     position: relative;
    left:60px;
}
    
}
</style>

<body>
     <button type="button" id="booking_print1" style="
	margin-top: 13px;
    right:100px;
    padding-top: 2px;
    padding-bottom: 1px;
    padding-left: 15px;
    padding-right: 15px;
    background: rgb(72,91,127);
    color: white;
    font-size: 22px;position:absolute;">Print</button>
    <div id="print_report">
        
        <div class="barcode ml-3 mt-2 rotate">
            
        <div class="row firstrow mt-2 ">
            <div class="col-sm-2 ml-1 ">
                <P >RETAIL</P>
            </div>
            
            <div class="col-sm-4 ml-3">
                <P>9101-0007</P>
            </div>
            <div class="col-sm-5 ml-3 pck_right">  
                <P>PACK QTY: 1</P>
            </div>
        </div>
        <div class="row second_top">
            <div class="col-sm-2 ml-1">
                <P>RHD</P>
            </div>
            
            <div class="col-sm-4 ml-3">
                <P>9101000 BLK</P>
            </div>
            <div class="col-sm-5 ml-3 pck_right">  
                <P>PACK QTY: 1</P>
            </div>
        </div>
        <div class="row mt-4 mt-2 scan_3drive">
            <div class="col-sm-6 ml-1 scan_paragraph">
                <p>VENTANA CHAISE CUSHION NATL</p>
            </div>
            <div class="col-sm-5 pck_right1">
                <img src="https://barcode.tec-it.com/barcode.ashx?data=430271140004&code=UPCA" alt="barcode" >
            </div>
        </div>

</div>
    </div>
</body>

</html>

$(document).ready(function () {
        $("#booking_print1").click(function () {
            $('#booking_print1').hide();
            $('#back_button').hide();

var divToPrint = document.getElementById("print_report");
            window.print();

});

</script>