CODEWITHSUNDEEP
javascriptjquerycss
Denver Dang
Denver Dang

Reputation: 2615

Move content to another div when overflow

So I'm trying to build a site where people are able to download a PDF file for printouts. I was suggested in another thread to make a "new" page where I put the information I want, and then just made a "Print to PDF" from that, since that would be the easiest way to transform content into a PDF.

So I made a page with a grid that are exactly the width and height of a A4 paper. So if printed, the content should fit perfectly.

However, my issue now is, that the content inside the grid changes depending on what people has made as input.

So right now I could have the following situation:

CSS:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 21cm;
        height: 29.7cm;
        border: 1px red solid;
        align-content: start;
        grid-row-gap: 10px;
        background: black;
    }

    .teams {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        "teamNumber roundScore";
        background: #ffffff;
        margin: 10px;
        padding: 10px;
        border-radius: 5px;     
    }

    .teamMember {
        border-bottom: 2px #474340 solid;
        padding: 5px 0px 5px 5px;
        margin: 5px;
    }

    .teamNumber {
        grid-area: teamNumber;
        text-align: left;
        grid-column: 1 / -1;
        padding-left: 5px;
        justify-self: start;
    }
</style>

HTML:

<div class="grid">
    <div class="teams">
        <p class="teamNumber">Team 1</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 2</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 3</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
        <div class="teamMember">11.</div>
        <div class="teamMember">12.</div>
        <div class="teamMember">13.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 4</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
    <div class="teams">
        <p class="teamNumber">Team 5</p>
        <div class="teamMember">1.</div>
        <div class="teamMember">2.</div>
        <div class="teamMember">3.</div>
        <div class="teamMember">4.</div>
        <div class="teamMember">5.</div>
        <div class="teamMember">6.</div>
        <div class="teamMember">7.</div>
        <div class="teamMember">8.</div>
        <div class="teamMember">9.</div>
        <div class="teamMember">10.</div>
    </div>
</div>

JSFiddle: https://jsfiddle.net/kfeer7f8/

So before getting to this page a person has told my system/website that there should be 5 teams, 50 people, and then divided these people into the 5 teams. And as you can see the result, at least from the formatting I'm using for this example, everything lines up as it should, BUT, in the end the last team overflows the dimensions of the A4 grid. And obviously this is random. Sometimes it's maybe only 2 teams and 20 people making it easy to fit on that grid. But sometimes it may even be much more than this making the overflow MUCH worse.

So my question is: Is there some way, via javascript/jquery, or anything else, where I can tell it to put/continue teams onto another grid/A4 paper IF it results in an overflow in the former grid ?

Upvotes: 2

Views: 432

Answers (2)

berkay kılı&#231;
berkay kılı&#231;

Reputation: 160

Sorry For the answer before: you can use @media print class for css and add it dynamically to you html. https://jsfiddle.net/s7fjLt8e/6/

@media print {
    .pageBreakClass{
      page-break-before: always;
    }
  }

Javascript code for add it dynamically

var teamArray = []
$('.teamMember').each(function(){
    teamArray.push($(this));
});
var i = 30;
while(teamArray[i]){
    teamArray[i].parent().after("<div class='pageBreakClass'>Page Breaks Here</div>");
  i += 30;
}

Upvotes: -1

S. Walker
S. Walker

Reputation: 2162

From my understanding. You just need to ensure that all grids fit on A4 sized paper and that no grid is broken.

You can do this using the print media query and page breaks: https://www.w3schools.com/cssref/pr_print_pagebi.asp

Use:

  @media print {
          .teams { 
                page-break-inside: avoid;
          }
    }

Then, regardless of how large a .team div is, as long as it's smaller than A4, it'll always fit on the page.

Upvotes: 2

Related Questions