header overlapping page content on second page #3454

Anishaaaaaaaaaaa · 2024-05-06T06:23:36Z

Anishaaaaaaaaaaa
May 6, 2024

quotation20240506_101922.pdf
this is how my code looks like in controller

    <div style="height: 50px; display: inline-block;">
        <img src="'. asset("images/logoo.jpg") .'" alt="Logo" style="height: 40px; width: auto; vertical-align: middle;">
        <div style="float:right;">
        <p style="font-size: 12px;">Worldwide Campus LLP <br>Authorized Agent for Feel At Home </p>
        </div>
    </div>
</div>';

    // Render the footer HTML
    $footerHtml = '
    <div style="position: fixed; bottom: 0; left: 0; right: 0; height: 30px;  text-align: center; line-height: 30px;">
    <script type="text/php">
        if (isset($pdf)) {
            $font = $fontMetrics->get_font("Arial, Helvetica, sans-serif", "normal");
            $size = 10;
            // Calculate X coordinate for horizontal centering
            $x = 270; // Assuming A4 paper width is 595 units, and div width is 175 units
            // Calculate Y coordinate for vertical centering
            $y = 800; // Half of the div height
            $pdf->page_text($x, $y, "Page {PAGE_NUM} of {PAGE_COUNT}", $font, $size);
        }
    </script>
</div>
';

    $tableContent = $this->extractTableContent($view);

   
    $contentHtml = '<div style="margin-top: 50px;">' . $tableContent . '</div>';
    // Combine header, footer, and main content
    $pdfHtml = $headerHtml . $contentHtml . $footerHtml;

i have used dompdf for this

Answered by bsweeney

May 7, 2024

You add the necessary margin to the body (page):

@page { margin-top: 100px; }

then position the header into that space using negative coordinates:

#header { position: fixed; top: -100px; left: -100px; right: -100px; height: 75px; background-color: blue; }

Actually, it looks like you're already attempting to position the header into the margin with top: -20px, but that's not enough to fully encompass the header since the content has a height of 50px.

View full answer

bsweeney · 2024-05-06T12:21:22Z

bsweeney
May 6, 2024
Maintainer

Would need to see more of your HTML and CSS to provide feedback. For example, you excluded the header styling, and there's no indication of how you're managing the spacing on the first page.

Note tht absolutely or fixed positioned elements are placed within the bounds of the body. You can ensure there is no content overlap by setting page margins and pushing the content into those margins. For example:

<html>
<head>
  <style>
    @page { margin: 100px; }
    body { background-color: orange; }
    #header { position: fixed; top: -100px; left: -100px; right: -100px; height: 75px; background-color: blue; }
  </style>
</head>
<body>
  <div id="header"></div>
<body>
</html>

6 replies

Anishaaaaaaaaaaa May 7, 2024
Author

this is my view page

@extends('layouts.admin')
@section('content')

<form autocomplete="off" action="{{ route('admin.quotation_template.store') }}" method="POST" enctype="multipart/form-data" id="theForm"> @csrf
	
<div class="row" id="contentToPrint">
<input type="hidden" name="quote_id" value={{$id}}>
<div class="col-lg-2">
		<div class="card">
			<div class="card-body">
				<h2>&#x20b9; {{ number_format($det->grand_total, 2, '.', ',') }}</h2>
				<hr>
				<div>
					<!-- <button type="button" class="btn btn-warning" id="printbtn" onclick="window.print()">Print Form</button> -->
				<button class="savebtn" target="_blank" onclick="printDiv('contentToPrint')">Print</button>
				
	      <button class="savebtn" id="downloadBtn">Download</button>
	      </div>
			</div>
		</div>
	</div>

	<div class="col-lg-10" >
		<div class="card" id="contentToPdf" >
			<div class="card-body"> 
				<h2>Quotation #{{$det->order_id}}</h2>
				
				<hr>
				<div class="datess" >
				<p><b>Quotation Date:</b> {{ date('Y-m-d', strtotime($det->bill_date)) }}</p>
				<p><b>Expiration Date:</b> {{$det->expiry_date}}</p>
				</div>
				<div class="price">
				<h2>Pricing</h2>
				<div class="testTable" >

				<table class="table_fah" >
				<thead>
				<tr class="text-center">
				 <th >Products</th>
				 
				 <th width="1%">Quantity</th>
				 <th width="15%">Unit Price</th>
				 <th>Taxes</th>
				 <th width="15%">Disc %</th>
				 <th width="20%">Total</th>
				</tr>

				</thead>
				
				<tbody id="row1" name="row1">
					<tr class="text-center" style="background: #99BDDD!important;">
				<td colspan="6">Property Details</td>
				 
				 
				</tr>
					<td>{{$prop->property_no}}  {{$prop->property_name}}<br>
					{{$arr1->description}}</td>
					<td>{{$arr1->qty}}</td>

					<td>{{number_format($arr1->unit_price, 2, '.', ',')}}</td>
					@if($arr1->tax)
					<td>GST {{$arr1->tax}}%</td>
					@else
					<td>-</td>
					@endif
					@if($arr1->discount)
					<td>{{$arr1->discount}}%</td>
					@else
					<td>-</td>
					@endif
					<td><p><span style="font-family: DejaVu Sans; sans-serif;">&#x20B9;</span> {{number_format($arr1->total, 2, '.', ',')}}</p></td>
				</tbody>
				
			   
				<tbody id="row2" name="row2">
				<tr class="text-center" style="background: #99BDDD!important;">
				<td colspan="6">Long term Rental Details</td>
				 
				 
				</tr>
					<td>First Month</td>
					<td>{{$arr2->qty}}</td>

					<td>{{number_format($arr2->unit_price, 2, '.', ',')}}</td>
					@if($arr2->tax)
					<td>GST {{$arr2->tax}}%</td>
					@else
					<td>-</td>
					@endif
					@if($arr2->discount)
					<td>{{$arr2->discount}}%</td>
					@else
					<td>-</td>
					@endif
					<td><p><span style="font-family: DejaVu Sans; sans-serif;">&#x20B9;</span> {{number_format($arr2->total, 2, '.', ',')}}</p></td>
					<tr>
                <td colspan="3" ></td>
                <td colspan="2" ><b>Untaxed Amount</b></td>
                <td colspan="1"><p><span style="font-family: DejaVu Sans; sans-serif;">&#x20B9;</span> {{number_format($det->untaxed_amt, 2, '.', ',')}}</p></td>
          </tr>
          <tr>
                <td colspan="3" ></td>
                <td colspan="2" ><b>SGST</b></td>
                <td colspan="1"><p><span style="font-family: DejaVu Sans; sans-serif;" >&#x20B9;</span> {{number_format($det->sgst, 2, '.', ',')}}</p></td>
          </tr>
          <tr>
                <td colspan="3" ></td>
                <td colspan="2" ><b>CGST</b></td>
                <td colspan="1"><p><span style="font-family: DejaVu Sans; sans-serif;" >&#x20B9;</span> {{number_format($det->cgst, 2, '.', ',')}}</p></td>
          </tr>
          <tr>
                <td colspan="3" ></td>
                <td colspan="2" ><b>Grand Total</b></td>
                <td colspan="1"><p><span style="font-family: DejaVu Sans; sans-serif;" >&#x20B9;</span> {{number_format($det->grand_total, 2, '.', ',')}}</p></td>
          </tr>
				</tbody>	

				
				
				
				
				</table>
				</div>

		
			</div>
		</div>
<style type="text/css">

.printt{
		text-decoration: none;
		color: #fff;
	}
.table_fah td {
  padding: 5px 15px;
  font-size: 15px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0em;
  text-align: left;
  max-width: 200px;
  word-break: break-all;
  border: 1px solid;
}
.datess {
  justify-content: space-between;
  display: flex;
  font-size: 15px;
}
	.savebtn {
  text-align: center;
  width: 85px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #067B89;
  background: #067B89;
  color: #fff;
  
}

span.currency-sign{
font-family: DejaVu Sans; sans-serif;
}

.price{
	margin: 30px 0px;
}
.price h2 {
  font-size: 25px;
}
.table_fah thead th{
color: #01030B;
font-size: 16px;
padding: 5px 15px !important;
font-style: normal;
font-weight: 500 !important;
line-height: 40px;  
text-transform: capitalize;
text-align: left;
border: 1px solid;
}
 
.table_fah thead{
    background: #EBEAEA !important;
    height: 50px ;

}
.table_fah td{
    padding: 5px 15px;
    font-size: 15px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 0em;
    text-align: left;
    max-width: 200px;
    word-break: break-all;

}

.table_fah thead tr{
    background: #EBEAEA !important;
    height: 50px ;  
}
thead {
	display: table-row-group;
}

.table_fah {
border-spacing: 0;
    }
 
</style>
		
	</div>
	<div class="lead-btn">
			 
	   	<input class="savebtn" id="theForm" type="submit" value="Save"> 
	   	
	   </div>
</div>
</div> <!--row end -->
</form>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompdf/0.8.5/dompdf.min.js"></script>

<script type="text/javascript">



	function printDiv(divName) {
    var printContents = $('#' + divName).html();
    var originalContents = $('body').html();

    $('body').html(printContents);

    window.print();

    $('body').html(originalContents);
}


    $(document).ready(function() {
        // Click event handler for download button
        $('#downloadBtn').click(function() {
            // Change form action attribute to pdf_generator route
            $('#theForm').attr('action', "{{ url('/admin/quotation_template/pdf_generator') }}");
           
            
        });
    });




</script>
@endsection

bsweeney May 7, 2024
Maintainer

It looks like you're trying to set a top margin on a DIV surrounding the body content. This will work on the first page, but on subsequent pages the margin is collapsed. Until we implement support for the box-decoration property (#640) you'll need to use the technique I outlined where you use the page margin to make space for the header, then place the header into that space.

Anishaaaaaaaaaaa May 7, 2024
Author

how do i implement it ? i have already given the whole controller and view page above

bsweeney May 7, 2024
Maintainer

You add the necessary margin to the body (page):

@page { margin-top: 100px; }

then position the header into that space using negative coordinates:

#header { position: fixed; top: -100px; left: -100px; right: -100px; height: 75px; background-color: blue; }

Actually, it looks like you're already attempting to position the header into the margin with top: -20px, but that's not enough to fully encompass the header since the content has a height of 50px.

Answer selected by Anishaaaaaaaaaaa

Anishaaaaaaaaaaa May 8, 2024
Author

Thank you so much!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

header overlapping page content on second page #3454

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

header overlapping page content on second page #3454

Anishaaaaaaaaaaa May 6, 2024

Replies: 1 comment · 6 replies

bsweeney May 6, 2024 Maintainer

Anishaaaaaaaaaaa May 7, 2024 Author

bsweeney May 7, 2024 Maintainer

Anishaaaaaaaaaaa May 7, 2024 Author

bsweeney May 7, 2024 Maintainer

Anishaaaaaaaaaaa May 8, 2024 Author

Anishaaaaaaaaaaa
May 6, 2024

Replies: 1 comment 6 replies

bsweeney
May 6, 2024
Maintainer

Anishaaaaaaaaaaa May 7, 2024
Author

bsweeney May 7, 2024
Maintainer

Anishaaaaaaaaaaa May 7, 2024
Author

bsweeney May 7, 2024
Maintainer

Anishaaaaaaaaaaa May 8, 2024
Author