CODEWITHSUNDEEP
javascriptjqueryhtmlcssprinting
Awar Pulldozer
Awar Pulldozer

Reputation: 1101

when print page give div margin from top html

i have html page with div as head and the css position for that div is fixed now when i print multi page the dive come on inline with the body just the first page give padding this is images for it enter image description here

in the second page its showing like this enter image description here

now i need code to let the table always after the div head this is my code 

    <!DOCTYPE html>
<html dir='rtl'>
<head>
<title>Print sample</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {



#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;
    text-align: center;
}

#print-foot,.head {
   display: block;


}

#print-foot:after {
    content: counter(page) "من " counter(page);
    counter-increment: page;
}
</style>
<body>
<div id="print-head">
    <span style='margin-right:50px;' class='pull-right thead'>شركة مصطفى الشرباتي وشركاه</span>
    <span style='margin-left:50px;' class='pull-left'>شركة مصطفى الشرباتي وشركاه</span>
    <br />
    <br />
    <span class='pull-right'><small> التاريخ 3-1-2018</small></span>
    <span  class='pull-left'>
        <small>
            <div id="print-foot">صحفة: </div>
        </small>
    </span>
    <br />
    <u>كشف الذمم العامة بالمجاميع</u>
    <u>اسم المنطقة {{$city->city_name}} رمز المنطقة {{$city->id}}</u>
    <br />
    <br />
    <span>من تاريخ {{$request->fromDate}} الى تاريخ {{$request->toDate}}</span>
</div>
<table style='margin-top:135px;' border='1'class='table head table-responsive'>
<thead>
    <tr>
        <td>اسم العميل</td>
        <td>رقم العميل</td>
        <td>الرصيد المدور</td>
        <td>مدين</td>
        <td>دائن</td>
        <td>الرصيد</td> 
    </tr>   
</thead>
<tbody>
    @php $total = 0;$first_total = 0; $debt_total= 0; $total_re =0 ;@endphp
    @foreach($customers as $customer)
        <tr>
            <td>{{$customer->customer_name}}</td>
            <td>{{$customer->id}}</td>
            <td>
                {{round($customer->getVouchers->where('voucher_date','<',$request->fromDate)->sum('voucher_amount'),3)}}
                @php $first_total+=  $customer->getVouchers->where('voucher_date','<',$request->fromDate)->sum('voucher_amount')@endphp
            </td>
            <td>
                {{
                    round($customer->getVouchers()->
                    where('voucher_amount','>',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount'),3)
                }}
                @php $debt_total += $customer->getVouchers()->
                    where('voucher_amount','>',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount') @endphp
            </td>
            <td>
                {{
                    round($customer->getVouchers()->
                    where('voucher_amount','<',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount'),3) * -1
                }}
                @php $total_re += $customer->getVouchers()->
                    where('voucher_amount','<',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount') @endphp
            </td>
            <td>
                @if($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') > 0)
                    {{round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3)}} م
                    @php $total+= round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) @endphp
                @elseif($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') < 0)
                    {{round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) * -1}} د
                    @php $total+= round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) @endphp
                @elseif($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') == 0)
                    0 د
                @endif
            </td>
        </tr>
    @endforeach
    <tr>
        <td colspan='2'>المجموع</td>
        <td>{{round($first_total,3)}} م</td>
        <td>{{round($debt_total,3)}} م</td>
        <td>{{round($total_re,3) * -1}} د</td>
        <td>
            @if($total > 0)
                {{round($total,3)}} م
            @else
                {{round($total,3) * - 1}} د
            @endif
        </td>
    </tr>
</tbody>
</table>


</body>
</html>

thanks a lot

Upvotes: 0

Views: 984

Answers (1)

Sonia
Sonia

Reputation: 1919

Adding position relative to #print-head will work,

/* print only */

@media print {
    #print-head {
        position: relative;
    }
}

Upvotes: 1

Related Questions