I have a php page which dynamically generates ID cards. So I want that when the user clicks a button that id card which is a element gets printed. I tried all the answers available in Stackoverflow but all of them are changing size of the size of the div element whenever i am clicking the print button. Can someone please help me to solve this problem?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
font-size: 0.8em;
padding: 5px 10px 5px 10px;
margin: 0;
}
</style>
</head>
<body>
<div id="divid" style="border: 1px solid black;width: 30%;height: 250px;">
<img src="images/logo_small.png" width="150px">
<img src="images/indane.png" width="150px">
<img style="float: right;" src="images/zayed.jpg">
<p style="display: inline-block;"><b>Name:</b>Zayed Ahmed</p>
<p style="display: inline-block;"><b>Desig:</b>Delivery Man</p>
<p style="display: inline-block;"><b>DOB:</b>07/09/1974</p>
<div></div>
<p style="display: inline-block;"><b>Emp ID:</b> CTPL-01</p>
<p style="display: inline-block;"><b>PF Code:</b> XXXXXX</p>
<p style="display: inline-block;"><b>ESI Code:</b> 1234567890</p>
<div></div>
<p style="display: inline-block;"><b>Address:</b>53, Alimuddin Street, Kolkata-700016</p>
<div></div>
<p style="display: inline-block;"><b>Mobile :</b>93973878873</p>
<p style="display: inline-block;"><b>Emergency:</b> 9763867657</p>
<hr>
<img style="float: left;margin-left: 20px;" src="http://api.qrserver.com/v1/create-qr-code/?data=www.creativett.com&size=50x50">
<img src="images/sign.png" style="float: right;margin-bottom: 5px;margin-right: 10px;margin-top: 0;">
</div>
