I have tab full of form, I want to print all the form information. I have prepared the download button in the tab form. Its working well but I want adjust the CSS for the print. I want to make it more nicer but I can't figured it out how in the CSS part. I want to achieve output that 1 tab for one page. its that possible to do that ?
Each of the menu/tab have different page.
If I want to achieve that how do I adjust the CSS and give it some padding ?
$("#downloadPdf").click(function() {
window.print();
});@media print {
.nav-tabs {
display: none !important;
}
.tab-content>.tab-pane {
display: block !important;
}
.tab-content>.fade {
opacity: 1;
}
#downloadPdf {
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs" id="tabs">
<li class="active"><a data-toggle="tab" href="#homepage">Terms & Condition</a></li>
<li><a data-toggle="tab" href="#home">Info</a></li>
<li><a data-toggle="tab" href="#info">Form</a></li>
<li><a data-toggle="tab" href="#form">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="homepage" class="tab-pane fade in active">
<h3>Terms and Conditions</h3>
<span style="font-size: 80%;"><i>Please read the terms and condition first</i></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><input type="checkbox" id="reg"> Please tick this if u have read and understand everything </p>
</div>
<div id="home" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="info" class="tab-pane fade">
<h3>Menu 2</h3>
<div class="form-row">
<div class="col-md-12">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</div>
<div id="form" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<br>
</div>
</div>
</div>
<hr>
<div>
<p><button type="button" id="downloadPdf" class="btn btn-warning" data-toggle="tooltip" data-placement="top" title="Download">Download</button></p>
</div>
</body>
</html>