I’ve got a two-column, multi-page, data fed, phone directory. The screen layout works fine and the printing did until a recent update to DNN. I can’t blame DNN because it might be browser related, but I have the same problem with Chrome & Edge. I’ve tried page-break-before and after and I’m ready to try a completely different approach. I’m looking for suggestions for a sure shot format, maybe a table layout, or grid, display? Also, is there a way to view css code while in print preview? This would be very helpful. Here’s my @media print styling:
@media print {
html, body {
margin: 0;
color: #000;
background-color: #fff;
}
ul.leaders li:after {
content: "";
display: block;
overflow: hidden;
height: 16px;
border-bottom: 1px dotted;
}
.pageContainer {
position: relative;
width: 100%;
height: 1440px;
}
.pageContent{
margin: 0 auto;
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
page-break-after: always;
clear: both;
}
.columnLeft {
width: 50%;
height: 1440px;
padding-right: 10px;
}
.columnRight {
width: 50%;
height: 1440px;
padding-left: 10px;
}
.phDirRight{
font-size: 16px;
}
.phDirLeft{
font-size: 16px;
}
.footer {
position: absolute;
bottom: 10px;
}
.pageBreak {
display: block;
page-break-after: always;
}
}
</style>
<!-- ko if: $root.selectedMode() === 'view phone' -->
<div class="pageContainer">
<div class="pageContent">
<div class="columnLeft" data-bind="foreach: $root.page1Leader">
<div class="phWrap">
<span class="phDirLeft" data-bind="text: dName"></span>
<!-- ko if: dPhone -->
<span class="phDirRight" data-bind="text: dPhone"></span>
<!-- /ko -->
</div>
<div class="columnTxt" data-bind="foreach: children">
<!-- ko if: cType == 2 -->
<ul class="leaders">
<li class="phType2"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 3 -->
<ul class=leaders>
<li class="phType3"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 4 -->
<ul class=leaders>
<li class="phType4"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 5 -->
<ul class=leaders>
<li class="phType5"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
<div><br /></div>
<div data-bind="foreach: $root.page1Left">
<div class="phWrap">
<span class="phDirLeft" data-bind="text: dName"></span>
<!-- ko if: dPhone -->
<span class="phDirRight" data-bind="text: dPhone"></span>
<!-- /ko -->
</div>
<div class="columnTxt" data-bind="foreach: children">
<!-- ko if: cType == 2 -->
<ul class="leaders">
<li class="phType2"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 3 -->
<ul class=leaders>
<li class="phType3"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 4 -->
<ul class=leaders>
<li class="phType4"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 5 -->
<ul class=leaders>
<li class="phType5"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
</div>
</div>
<div class="columnRight">
<div id="emergencyInfo">
<ul class="leaders">
<li><span class="phType2">Emergency</span>
<span class="contactInfo" >911</span>
</li>
</ul>
<div class="emergencyInfo">(report accident, fire, serious illness, injury or crime in progress that requires immediate response — stay on phone line and give operator emergency location)</div><br />
<ul class="leaders">
<li><span class="phType2">Saint Mary's College Security</span>
<span class="contactInfo" >284-5000</span>
</li>
</ul>
<div class="phType2"> Problems with Utilities or Equipment</div>
<ul class="leaders">
<li><span class="contactInfo" >8 a.m.-4:30 p.m., Monday-Friday</span>
<span class="contactInfo" >284-5657</span>
</li>
</ul>
<div class="phType2"> All other times (including weekends and holidays)</div>
<ul class="leaders">
<li><span class="contactInfo" >digital pager</span>
<span class="contactInfo" >236-8997</span>
</li>
</ul>
</div>
<br />
<div data-bind="foreach: $root.page1Right">
<div class="phWrap">
<span class="phDirLeft" data-bind="text: dName"></span>
<!-- ko if: dPhone -->
<span class="phDirRight" data-bind="text: dPhone"></span>
<!-- /ko -->
</div>
<div class="columnTxt" data-bind="foreach: children">
<!-- ko if: cType == 2 -->
<ul class="leaders">
<li class="phType2"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 3 -->
<ul class=leaders>
<li class="phType3"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 4 -->
<ul class=leaders>
<li class="phType4"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
<!-- ko if: cType == 5 -->
<ul class=leaders>
<li class="phType5"><span class="contactInfo" data-bind="text: cName"></span>
<!-- ko if: cPhone -->
<span class="contactInfo" data-bind="text: cPhone"></span>
<!-- /ko -->
</li>
</ul>
<!-- /ko -->
</div>
</div>
</div>
</div>
<div class="footer" data-bind="text: $root.footer1"></div>
</div>
CSS alone won’t help us. We need to see some HTML. Also, dev tools in Chrome and Firefox have a print styles preview button.
In Chrome: 3 dots (ellipses), more tools, Rendering, Emulate CSS media type (choose print) – Is this what you’re taliking about? My layout appears fine using this, but the actual print preview does not. HTML: