I am trying to style contents for a printable page but page-break-before isn't working as expected. I am trying to ensure there is a page break before the element with id estimateInfo. I have read that having floats or borders can create these issues but even when setting these to none the problem persists. Could you help me see where I'm going wrong and how to remedy this. Thanks! The code I have so far:
/*style ID buttons*/
input[type=submit]:not(#estimateButton) {
float: left;
width: 7%;
left: 0%;
margin-left: 10px;
position: absolute;
}
/*style client estimate information*/
#estimateInfo {
float: right;
margin-right: 15%;
width: 280px;
padding: 10px;
position: absolute;
margin-left: 50px;
background-color: #655473;
border: 2px solid #221A2A;
color: #FFFFFF;
top: 270px;
left: 300px;
letter-spacing: 1px;
}
/* make page printable */
@media print {
.header, #estimateButton, #confirmSent, .footer, h2, h3 {
display: none;
}
#outstandingIDs {
float: left;
left: 20%;
width: 70%;
top: 1%;
position: absolute;
font-size: 20px;
}
input[type=submit]:not(#estimateButton) {
border: none;
width: 70%;
}
#estimateInfo {
float: none;
border: none;
page-break-before: always;
position: static;
box-sizing: content-box;
overflow: visible;
}
}
<body>
<div id = "outstandingIDs">
<!print booking IDs from flask app as buttons>
</div>
<!estimate info and confirm sent button>
<div id ="estimate">
<p id="estimateInfo"></p>
<input type ="submit" value="Confirm estimate has been sent" onclick="estimateSent()" id="estimateButton">
<p id = "confirmSent"></p>
</div>
Aucun commentaire:
Enregistrer un commentaire