Bootstrap 4 d-print classes for form - css

Question

I've created a form that I give the user the option to submit online or print and mail. I use a simple javascript print command and turn off all other elements for printing besides the form using the .d-print-none class. It's probably really simple problem, but when I print it it doesn't output the entire form. It fills one page and then a second blank page. Wondering if it would help to add one of the other d-print classes to the form element or maybe there's a way to the height of the form to fit one page. Is this a bug or am I missing something?
There's not much special about the code, but I've displayed the form below.
<div class="col-lg-7 col-sm-12 d-print-inline-flex h-100 w-100" id="donationForm">
<div class="card">
<div class="card-header"><h4 class="text-center">Donation Request Form</h4>
</div>
<div class="card-body">
<form name="donationRequest" id="donationRequest" novalidate>
<h5>Event Information</h5>
<div class="form-group">
<label for="orgName">Name of Organization: </label>
<input type="text" class="form-control" id="orgName" required placeholder="Name of Organization">
</div>
<div class="form-group">
<label for="taxID">501(c)(3) Tax ID Number: </label>
<input type="number" class="form-control" id="taxID" required placeholder="Tax ID Number">
</div>
<div class="form-group">
<label for="eventName">Event Name: </label>
<input type="text" class="form-control" id="eventName" required placeholder="Event Name">
</div>
<div class="form-group">
<label for="eventDate">Date of Event: </label>
<input type="date" class="form-control" id="eventDate" required placeholder="Event Date">
</div>
<div class="form-group">
<label for="eventLoc">Event Location: </label>
<input type="text" class="form-control" id="eventLoc" required placeholder="Event Location">
</div>
<hr>
<h5>Contact Information</h5>
<div class="form-group">
<label for="contact">Contact Name: </label>
<input type="text" class="form-control" id="contact" required placeholder="First & Last Name of Contact Person">
</div>
<div class="form-group">
<label for="address">Address: </label>
<input type="text" class="form-control" id="address" required placeholder="Address of Organization">
</div>
<div class="form-group">
<label for="city">City: </label>
<input type="text" class="form-control" id="City" required placeholder="City of Organization">
</div>
<div class="form-group">
<label for="state">State: </label>
<input type="text" class="form-control" id="State" required placeholder="State of Organization">
</div>
<div class="form-group">
<label for="zipcode">Zip Code: </label>
<input type="number" class="form-control" id="zipcode" required placeholder="Zip Code of Organization">
</div>
<div class="form-group">
<label for="phone">Phone: </label>
<input type="number" class="form-control" id="phone" required placeholder="123-456-7890">
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="email" class="form-control" id="email" required placeholder="email#provider.com">
</div>
<hr>
<h5>Type of Donation Request:</h5>
<div class="form-group">
<label class="form-check-inline"><input type="checkbox" value=""> Financial Contribution</label>
<label class="form-check-inline"><input type="checkbox" value=""> Auction/Drawing Item</label>
<label class="form-check-inline"><input type="checkbox" value=""> Other</label>
</div>
<div class="form-group">
<label for="description">Please briefly note how this event will benefit our community:</label>
<textarea class="form-control" rows="7" id="comment"></textarea>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-md-6"><button type="submit" class="btn btn-primary btn-block"><em class="fa fa-send"></em> Submit Request</button></div>
<div class="col-md-6"><button class="btn btn-primary btn-block"><em class="fa fa-print"></em> Print Form</button></div>
</div>
</div>
</form>
</div>
</div>
</div>

Answer 1

I was dealing with this issue a week ago, and I solve it using this:
<div id="printbody" class="d-none d-print-block"> /*load elements to print via js*/ </div>
<div class="d-block d-print-none"> /*all my html body with funtionalities*/ </div>
I use the event onbeforeprint to load the print element to Mozilla, Chrome, Safari, EI, Edge. Using something like this:
window.onbeforeprint = function () {
$("#printbody").html("")
$("#printbody").append($("#list1").html())
$("#printbody").append($("#msg1").html())
$("#printbody").append($("#things").html())
$("#printbody").append($("#foo").html())
$("#printbody").append($("#faa").html())
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
$("#printbody").append($("#flag").html())
$("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')
$("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
$("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')
$("#printbody").append($("#tmksla").html())
} else {
$("#printbody").append($("#foos").html())
}
$("#printbody").append('<div>' + $("#objs").html() + '</div>')
$("#printbody").append($("#lmsg").html())
}
Actually iOS doesn't trigger the event onbeforeprint so I did the same handle but using the event onclick="fillPrint()". Seen like this:
function fillPrint() {
$("#printbody").html("")
$("#printbody").append($("#list1").html())
$("#printbody").append($("#msg1").html())
$("#printbody").append($("#things").html())
$("#printbody").append($("#foo").html())
$("#printbody").append($("#faa").html())
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
$("#printbody").append($("#flag").html())
$("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')
$("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
$("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')
$("#printbody").append($("#tmksla").html())
} else {
$("#printbody").append($("#foos").html())
}
$("#printbody").append('<div>' + $("#objs").html() + '</div>')
$("#printbody").append($("#lmsg").html())
}
The issue generate when you try to print a large element with multiple sections (div) because of that I decided to bring it a higher level of element on the DOM.
I hope this can help someone.