Menu
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>
222
For the solution you need css property page-break-before: always; and set it for 2, 3, 4 tab.
CSS
@media print {
.nav-tabs {
display: none !important;
}
.tab-content > .tab-pane {
display: block !important;
}
.tab-content > .fade {
opacity: 1;
}
#downloadPdf {
display: none;
}
/* New lines */
#home,
#info,
#form {
page-break-before: always;
}
}
$('#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;
}
/* New lines */
#home,
#info,
#form {
page-break-before: always;
}
}<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>
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
