Issue with Print Page break - Print preview in browsers
I am facing an issue with Page break, where my div starts at the page end rather than being at the next page after applying the page-break.
I have referred this question How to deal with page breaks when printing a large HTML table and made some adjustments to my CSS properties
.items-list {
page-break-inside:avoid;
page-break-after:auto;
}
Basic structure of HTML file
<div class="row items-list" *ngFor="let country of countryWiseData">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
My issue is with the Continuation of Div's section, I need the broken div to be part of next page.
html css
google-chrome printing page-break asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
add a comment |
I am facing an issue with Page break, where my div starts at the page end rather than being at the next page after applying the page-break.
I have referred this question How to deal with page breaks when printing a large HTML table and made some adjustments to my CSS properties
.items-list {
page-break-inside:avoid;
page-break-after:auto;
}
Basic structure of HTML file
<div class="row items-list" *ngFor="let country of countryWiseData">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
My issue is with the Continuation of Div's section, I need the broken div to be part of next page.
html css
google-chrome printing page-break asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
add a comment |
I am facing an issue with Page break, where my div starts at the page end rather than being at the next page after applying the page-break.
I have referred this question How to deal with page breaks when printing a large HTML table and made some adjustments to my CSS properties
.items-list {
page-break-inside:avoid;
page-break-after:auto;
}
Basic structure of HTML file
<div class="row items-list" *ngFor="let country of countryWiseData">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
My issue is with the Continuation of Div's section, I need the broken div to be part of next page.
html css
google-chrome printing page-break asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
I am facing an issue with Page break, where my div starts at the page end rather than being at the next page after applying the page-break.
I have referred this question How to deal with page breaks when printing a large HTML table and made some adjustments to my CSS properties
.items-list {
page-break-inside:avoid;
page-break-after:auto;
}
Basic structure of HTML file
<div class="row items-list" *ngFor="let country of countryWiseData">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
My issue is with the Continuation of Div's section, I need the broken div to be part of next page.
html css
google-chrome printing page-break html css
google-chrome printing page-break asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
edited Nov 21 '18 at 14:49
Am Novice
asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
asked Nov 20 '18 at 17:24
Am NoviceAm Novice
73111
73111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
This might not be an issue which people might face frequently, but posting my root casue so that it might help someone.
The issue was due to css property that was being loaded from element that is hidden away from print, in my case it was
flex-direction : column
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398337%2fissue-with-print-page-break-print-preview-in-browsers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This might not be an issue which people might face frequently, but posting my root casue so that it might help someone.
The issue was due to css property that was being loaded from element that is hidden away from print, in my case it was
flex-direction : column
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
add a comment |
This might not be an issue which people might face frequently, but posting my root casue so that it might help someone.
The issue was due to css property that was being loaded from element that is hidden away from print, in my case it was
flex-direction : column
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
add a comment |
This might not be an issue which people might face frequently, but posting my root casue so that it might help someone.
The issue was due to css property that was being loaded from element that is hidden away from print, in my case it was
flex-direction : column
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
This might not be an issue which people might face frequently, but posting my root casue so that it might help someone.
The issue was due to css property that was being loaded from element that is hidden away from print, in my case it was
flex-direction : column
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
answered Nov 22 '18 at 12:05
Am NoviceAm Novice
73111
73111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398337%2fissue-with-print-page-break-print-preview-in-browsers%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
