When items is above 14 display second page satrting display 4 boxes

D_Haritha · September 13, 2024, 10:17am

Htmll code:

Your Title Here /* Your custom CSS styles */

    <div class='col-sm box inner-content' >
    
	<div class="address">


            
            
        </div>
        <div class="top" style="margin-left:2px;">
        <P> SELLER</P></div>
        <div class="contacts2" >
            <p>Phone: <span class="bold">(267)5380701    </span></p>
            <p>Fax: <span class="bold"  >(267)5390713    </span></p>
            <p>Email: <span class="bold" style = "color: darkblue;text-decoration: underline;">reliance@info.bw</span></p>
            <p>VAT No: <span class="bold"  >BW500000269595  </span></p>
        </div>
        <div class="addressp">
            <h6 class="bold">
                Rhino Steel Rolling Mills Pty Ltd
            </h6>
            <p>P O Box 3028</p>
            <p>Gaborone</p>
            <p>Botswana</p>
        </div>
    </div>
       <div class='col-sm box inner-content' >
        <div class="flex-col justify-center1">
            <h4>Tax Invoice</h4>
        </div>
        <div>
            <p style="margin-top:20px;"></p>
       </div> 
      <div class="flex-row gap-md1">
             <p>Date</p>
      <p style="margin-left:320px" id="posting_date" >{{ doc.posting_date }}</p>




       </div>

        
        <hr/>
        
            <div style="display: flex; justify-content: space-between;">
            <p style="text-align: left; margin: 0;">Delivery Note Number</p>
             <p style="text-align: right; margin: 0;">{{doc.delivery_note_number if doc.delivery_note_number else ''}}</p>
            </div>
        
		<hr/>
		
            <div style="display: flex; justify-content: space-between;">
            <p style="text-align: left; margin: 0;">Document Number</p>
             <p style="text-align: right; margin: 0;">{{doc.name}}</p>
            </div>
        
    </div>
</div>

   <div class="row gap-sm ">
    <div class='flex-col box gap-sm inner-content' >
        <div >
            <h6 class="bold">CUSTOMER</h6>
            <h5 class="bold">{{doc.customer_name}}</h5>
            <p>{{ doc.customer_address1 }}</p>
            <p>Telephone no: <span>{{doc.contact_mobile if doc.contact_mobile else ''}}</span></p>
        </div>
    </div>
       <div class='flex-col box inner-content' >
        <h6 class="bold">Deliver To</h6>
        <!--<p>Shipping Address</p>-->
        <p>{{doc.customer_name if doc.customer_name else ' '}}</p>
        <p>{{doc.deliver_to if doc.deliver_to else '' }}</p>
    </div>
</div>


<table class="item-table-wrapper">
<table class="item-table" >
<thead>
    <tr>
        <th>Account</th>
        <th>Your Reference</th>
        <th>Exporters Code</th>
        <th>Tax Reference</th>
        <th>Currency</th>
        <th>Terms</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>{{ doc.customer if doc.customer else '' }}</td>
        <td>{{ doc.name if doc.name else '' }}</td>
        <td>{{ doc.exporters_code if doc.exporters_code else '' }}</td>
        <td>{{ doc.tax_reference if doc.tax_reference else '' }}</td>
        <td>{{ doc.currency if doc.currency else '' }}</td>
        <td>{{ doc.tc_name if doc.tc_name else '' }}</td>
    </tr>
</tbody>

 <table class="item-table1";>
<thead>
    <tr>
        <th>Code</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Unit</th>
        <th>Unit Price</th>
        <th>Disc %</th>
        <th>Tax</th>
        <th>Net Price</th>
         
    </tr>
</thead>
<tbody>
    {% for item in doc.items %}
    <tr>
        <td >{{ item.item_code if item.item_code else '' }}</td>
        <td style="flex-basis: 500px;">{{ item.description if item.description else '' }}</td>
        <td style="flex-basis: 10px;">{{ item.qty if item.qty else '' }}</td>
        <td style="flex-basis: 10px;">{{ item.stock_uom if item.stock_uom else '' }}</td>
        <td>{{ "%0.2f"|format(item.rate | float) if item.rate else '' }}</td>
        <td>{{ item.discount_amount if item.discount_amount else '' }}</td>
        <td>{{ item.custom_tax_amount if item.custom_tax_amount else '' }}</td>
        <td>{{ "%0.2f"|format(item.amount | float)  if item.amount else '' }}</td>
        
    </tr>
    {% endfor %}
</tbody>

<div class='row gap-sm inner-content' >
    <div class='col-sm-8  box4 inner-content' >
	<div >
            <h6 style="text-align: center; margin: 0;text-decoration: underline;font-weight:bold">
                Banking Details
            </h6>
            <br/>
      <div style="display: flex;">
<p style="text-align: left; margin: 0;">
    {% if doc.company == "Rhino Steel Rolling Mill (Pty) Ltd" %}
        {% if doc.currency == "BWP" %}
            Bank : Bank of Baroda. 
            <span>Branch Code:</span>
            <span>110167.</span>
            <span>Branch:</span>
            <span>Main Mall, Gaborone.</span>
            <span>Account No:</span>
            <span>95210400000159.</span>
            <br>
            Bank : First National Bank.
            <span>Branch Code:</span>
            <span>281467.</span>
            <span>Branch:</span>
            <span>Main Mall, Gaborone.</span>
            <span>Account No:</span>
            <span>62606241777.</span>
        {% elif doc.currency == "ZAR" %}
            Bank: Bank of Baroda. 
            <span>Branch Code:</span>
            <span>110167.</span>
            <span>Branch:</span>
            <span>Main Mall, Gaborone.</span>
            <span>Account No:</span>
            <span>95211100005954.</span>
            <br>
            Bank: First National Bank.
            <span>Branch Code:</span>
            <span>252505.</span>
            <span>Branch:</span>
            <span>Fordsburg.</span>
            <span>Account No:</span>
            <span>62381742339.</span>
        {% else %}
            {{ doc.customer_bank if doc.customer_bank else '' }}.
            <span>Branch Code:</span>
            <span>{{ doc.bank_branch if doc.bank_branch else '' }}.</span>
            <span>Account No:</span>
            <span>{{ doc.bank_account_number if doc.bank_account_number else '' }}.</span>
        {% endif %}
    {% else %}
        {{ doc.customer_bank if doc.customer_bank else '' }}.
        <span>Branch Code:</span>
        <span>{{ doc.bank_branch if doc.bank_branch else '' }}.</span>
        <span>Account No:</span>
        <span>{{ doc.bank_account_number if doc.bank_account_number else '' }}.</span>
    {% endif %}
</p>

    <div class="flex-row address";" >
            
    <p class="containerp">
    <span class="placeholder">Authorized By __________________</span>
    <span class="placeholder">Checked By __________________</span>
    </p>
            
    <div class="flex-col gap-sm2" style="margin-top: 30px;"></div>
            
    <p class="containerp">
    <span class="placeholder">Prepared By ___________________</span>
    <span class="placeholder">Date ________________________</span>
    </p>
            
            </div>
        
    </div>
       <div class='col-sm-4 box5 inner-content' >
        
         <table class="item-table2">
         <tr>
<th>Total (Excl)</th>
<td style="text-align: right;">
    {% if doc.currency == 'BWP' %}
        P&nbsp;{{ "%0.2f"|format(doc.total | float)  }}
    {% elif doc.currency == 'USD' %}
        $&nbsp;{{ "%0.2f"|format(doc.total | float) }}
    {% elif doc.currency == 'ZAR' %}
        R&nbsp;{{ "%0.2f"|format(doc.total | float)  }}
    {% else %}
        {{ "%0.2f"|format(doc.total | float)  }}
    {% endif %}
</td>

         <tr>
                <th>Discount % </th>
                <td style="text-align: right;">{% if doc.currency == 'BWP' %}
        P&nbsp;{{doc.total_discount}}
    {% elif doc.currency == 'USD' %}
        $&nbsp;{{doc.total_discount}}
    {% elif doc.currency == 'ZAR' %}
        R&nbsp;{{doc.total_discount}}
    {% else %}
       {{doc.total_discount}}
    {% endif %}
                </td>
         </tr>
         <tr>
                 <th>Total (Excl)</th>
                <td style="text-align: right;">
    {% if doc.currency == 'BWP' %}
        P&nbsp;{{ "%0.2f"|format(doc.total | float) }}
    {% elif doc.currency == 'USD' %}
        $&nbsp;{{"%0.2f"|format(doc.total | float)  }}
    {% elif doc.currency == 'ZAR' %}
        R&nbsp;{{ "%0.2f"|format(doc.total | float)  }}
    {% else %}
        {{ "%0.2f"|format(doc.total | float)  }}
    {% endif %}
</td>
             </tr>
        <tr>
                 <th>Tax</th>
                 <td style="text-align: right;">
    {% if doc.currency == 'BWP' %}
        P&nbsp;{{"%0.2f"|format(doc.total_taxes_and_charges | float) }}
    {% elif doc.currency == 'USD' %}
        $&nbsp;{{"%0.2f"|format(doc.total_taxes_and_charges | float)}}
    {% elif doc.currency == 'ZAR' %}
        R&nbsp;{{"%0.2f"|format(doc.total_taxes_and_charges | float)}}
    {% else %}
        {{"%0.2f"|format(doc.total_taxes_and_charges | float)}}
    {% endif %}
</td>
                 
             </tr>
    
       <tr>
                 <th>Total (Incl)</th>
                 <td style="text-align: right;">{% if doc.currency == 'BWP' %}
        P&nbsp;{{"%0.2f"|format(doc.outstanding_amount | float) }}
    {% elif doc.currency == 'USD' %}
        $&nbsp;{{"%0.2f"|format(doc.outstanding_amount | float)  }}
    {% elif doc.currency == 'ZAR' %}
        R&nbsp;{{"%0.2f"|format(doc.outstanding_amount | float)  }}
    {% else %}
        {{ "%0.2f"|format(doc.outstanding_amount | float) }}
    {% endif %}
                </td>
             </tr> 
    </table>
    </div>

</div>
</div>

CSS:/* Apply styles to the first two boxes in the first row /
.address-container .inner-content:first-child,
.address-container .inner-content:nth-child(2) {
max-height: 200px; / Adjust this value to set the desired height /
padding: 4px; / Reduce padding /
font-size: 1em; / Reduce font size 0.7em /
line-height: 1.0; / Adjust line height for better fit /
overflow: hidden; / Hide overflow content /
text-overflow: ellipsis; / Add ellipsis for overflow text /
white-space: nowrap; / Prevent text wrapping */
}

/* Ensure other styles remain consistent */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.flex-col {
display: flex;
flex-direction: column;
width: 100%;
}

.flex-row {
display: flex;
flex-direction: row;
width: 100%;
}

.flex-1 {
flex: 1;
}

.flex-2 {
flex: 2;
}

.gap-lg {
gap: 100px;
}

.gap-sm {
gap: 10px;
}

.gap-md {
gap: 50px;
}

.gap-md1 {
margin-right: 45px;
margin-top: 10px;
}

.gap-sm1 {
gap: 0px;
}

.gap-sm2 {
gap: 30px;
}

.justify-center {
justify-content: center;
}

.justify-center1 {
display: flex;
align-items: center; /* Align items vertically /
justify-content: center;
margin: 0;
border-bottom: 1px solid black; / Add a solid line below each paragraph */
padding-bottom: 0px;
color: darkblue;
}

.container-fluid {
width: 100%;
height: 100%;
}

.inner-content {
padding: 8px;
}

.bold {
font-weight: bold;
}
.top{
font-weight: bold;
margin-top:0px;
font-size: 12px;
}

.row {
display: flex;
flex-direction: row;
}

.box {
border: 1px solid black;
width: 100%;
}
.box4 {
border: 1px solid black;
width: 100%;
margin-left:70;
}
.box5 {
border: 1px;/* solid black;*/
width: 100%;
margin-right:70;
}

.box1 {
border: 1px solid black;
width: 100%;
margin-top: 200px;
}

.contacts {
width: 100%;
text-align: right;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1px;
}

.contacts1 {
width: calc(100% - 50px); /* Adjust the width as needed /
text-align: right;
margin-right: 50px;
margin-top: 50px; / Adjust the margin as needed */
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
}

.contacts2 {
width: calc(100% - 50px); /* Adjust the width as needed */
text-align: left;
margin-left: 300px;
margin-top:2px; /*Adjust the margin as needed */
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 5px;
}

.address {
display: flex;
flex-direction: column;
margin-top: 5px;
margin-left: 20px;
}

.addressp {
display: flex;
flex-direction: column;
margin-top: -10px;
margin-left: 5px;
margin-bottom:20px;
}

.item-table {
width: 101%;
border-collapse: collapse ;
margin-top: 10px;
margin-left:-5px;
margin-right:-10px;

}

.item-table th,
.item-table td {
border: 1px solid black;
padding: 5px;
}

.item-table th {
background-color: #f2f2f2;
text-align: left;
font-size: 1em;
color: black;
font-weight: bold;
}

.item-table1 {
width: 101%;
border-collapse: collapse;
margin-top: 11px;
table-layout: auto;
padding: 1px;
margin-left:-5px;
margin-right:-10px;
}

.item-table1 th,
.item-table1 td {
border: 1px solid black;
padding: 1px;

 /*justify-content: flex-end;
white-space: nowrap; */

}

.item-table1 th {
background-color: #f2f2f2;
text-align: left;
font-size: 1em;
color: black;
font-weight: bold;

/*white-space: nowrap;*/
padding: 1px;
justify-content: flex-end;

}

.item-table2 {
width: 100%;
height: 106.5%;
border-collapse: collapse ;
margin-top: -7px;
margin-bottom:-3px;
margin-left:10px;
margin-right:80px;

}

.item-table2 th,
.item-table2 td {
border: 1px solid black;
padding: 5px;
}

.item-table2 th {
background-color: #f2f2f2;
text-align: left;
font-size: 1em;
color: black;
font-weight: bold;
}

.col-sm-8 {
width: 70%;
margin-left:35px;
}

.col-sm-4 {
width: 30%;
margin-right:35px;
}

.bottom-box {
/border: 1px solid black;/
width: 100%;
position: fixed; /* Fixes the position /
bottom: 0; / Positions it at the bottom of the page /
left: 0; / Aligns it to the left edge /
padding: 10px; / Optional: Adds padding for spacing /
box-sizing: border-box; / Includes padding and border in the element’s total width and height */
margin-left:70;
margin-right:70;
margin-bottom:20px;
}

/* Container for the entire page content */

.page-container {
flex: 1; /* Grow to fill remaining space /
padding: 20px; / Add padding to the entire page content */
}

.first-row {
display: flex;
gap: 10px; /* Adjust gap between columns */
}

.box2 {
border: 1px solid black;
padding: 10px;
flex: 1; /* Equal width columns */
}

@media print {
@page {
size: auto; /* auto is the initial value /
margin: 0mm; / this affects the margin in the printer settings */
}
}

.print-format {
    width: 280mm; /* Width of A4 */
    height: auto; /* Let the height adjust automatically */
    padding:10mm; /* Add some padding if needed */
}

.containerp {
display: flex;
justify-content: space-between; /* Adjust the space between elements /
align-items: center;
margin: 0;
}
.placeholder {
/ border-bottom: 1px solid #000; Optional: adds a line for placeholder /
width: 300px; / Adjust width as needed */
}

    .item-table tr:nth-child(14),

.item-table1 tr:nth-child(14),
.item-table2 tr:nth-child(14) {
page-break-before: always; /* Force a page break before the 14th row */
}

i have 25 items there. in this i want to add condition for when items is above 14 dispaly second page . but i need in second page also attached 4 boxes to second page starting after that dispaly above 14 items. provide the updated html and css code for me.