I have a table of data which dynamically producing, and I converted the html page into pdf using dom pdf.I want to add header and footer on each page. but the problem is when the data is large the footer is not stable, and also the the header and footer is not repeating on each page.
<div class="conainer-fluid">
<div class="row0">
<div class="header"><img src="<?php echo base_url()?>public/images/alhamed.jpg" style="width: 700px;"></div>
</div>
<div class="card-body">
<div class="table-responsive-sm">
<table class="table table-striped">
<thead class="thead-default">
<tr>
<th class="text-center"> # </th>
<th> Product </th>
</tr>
</thead>
<tbody>
<?php
for($j=0;$j<40;$j++)
{
?>
<tr>
<td>haii</td>
</tr>
<?php
if($i<$count)
{
$i++;
}
}
?>
</tbody>
</table>
</div>
<div class="conainer-fluid">
<div class="row1">
<div class="footer"><img src="<?php echo base_url()?>public/images/footer.jpg" style="width: 700px; margin-bottom: 150px;"></div>
css
table td{page-break-after: always;}
.header { position: fixed; }
.row1{position: fixed;background-color: lightblue;}
how can i make the header and footer repeating on each page of pdf according to the data ?
Related
I am building a template for a site and it needs 4 columns. In desktop mode, or anything above tablet width, it should display all 4 columns though the outer 2 are only for padding. When in mobile mode, the outer 2 are set to disappear, but I need the middle two to reverse their order. I tried setting the 'col-' setting to reverse when under 480px, but it isn't working. I'd appreciate someone looking over my work.
HTML
<div id="inus1" class="fk-row row">
<div data-text="text" align="center" id="inyb3" class="fk-col order-1">
</div>
<div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
<div id="ifo6l">
<div id="iq1zf" class="fk-headline">Thank you for your purchase!
</div>
<div data-text="text" id="ihleo">Order {{orderId}}
<div draggable="true" id="i6myy-2-2">
<div draggable="true" id="ii502-2-2-2">
<b data-text="text">
<span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
</b>
</div>
</div>
</div>
</div>
<iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>
</div>
<div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
<table id="orderSummaryTable" class="w-100">
<thead id="iweztk">
<tr id="ikyi1h">
<th colspan="3" id="i10uii">
<span data-text="text" id="iqvl9r">Order Summary</span>
</th>
</tr>
<tr id="ieggiv">
<th id="inwrj">
<span data-text="text" id="ipokfh">Item</span>
</th>
<th id="i259c">
<span data-text="text" id="i5gfso">Quantity</span>
</th>
</tr>
</thead>
<tbody id="items-list">
<tr>
<td class="cell cell-items-list">
</td>
</tr>
</tbody>
</table>
</div>
<div align="center" id="ijiyf" class="fk-col order-4">
</div>
</div>
CSS (just the media query)
#media (max-width: 480px){
#in2gu{
width:615px;
height:350px;
}
#i80rh{
width:100%;
}
#i33dp{
width:100%;
}
#inyb3{
display:none;
}
#ijiyf{
display:none;
}
#in2gu{
width:615px;
height:350px;
}
}
Bootstrap comes with ordering utilities. Try them by appending order-0, order1, etc. to your elements
https://getbootstrap.com/docs/4.0/utilities/flex/#order
I tried to use bootstrap row and columns classes inside a for each loop and some extra spaces are displayed as unexpected.
First I used the following code and it worked well.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<div class="row">
<tr>
<td style="display: none;" >{{$gemStone->created_at}}</td>
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
<div class="col-sm-3"> free space of 3 cols </div>
<div class="col-sm-3">free space of 3 cols </div>
</td>
</tr>
</div>
#endforeach
</tbody>
</table>
above code gave a view like this image. In order to use the free space marked in the picture, I tried adding another column by creating another <td> ... </td> inside <tr> </tr> using $counter variable as below.
<table border="0" id="myTable" class="table" >
<thead border-bottom="0">
<tr>
<th border-bottom="0" style="display: none;">Gem</th>
<th border-bottom="0" style="display: none;">Name</th>
<th border-bottom="0" style="display: none;">Name</th>
</tr>
</thead>
<tbody>
<?php $count = 0 ?>
#foreach(App\GemStone::where('active',TRUE)->orderBy('created_at', 'desc')->get() as $gemStone)
<?php $count = $count + 1 ?>
#if($count % 2)
<tr>
<div class="row">
<td style="display: none;" >{{$gemStone->created_at}}</td>
#endif
<td>
<div class="col-sm-3">
<div align="center">
<img alt="Gem Stone Pic" src="{{route('get_image',['id' => $gemStone->id])}} " class="img-circle img-responsive">
</div>
</div>
<div class="col-sm-3">
<h3><b>{{$gemStone->type->type}}</b></h3>
#if($gemStone->shop->user->id == Auth::user()->id)
[Edit]<br>
#endif
{{$gemStone->size->size}}<br>
LKR: {{$gemStone->price}}<br>
<div>
{{$gemStone->description}}<br>
{{$gemStone->created_at}}
</div>
</div>
</div>
</td>
#if(!($count % 2))
</div>
</tr>
#endif
#endforeach
#if($count%2)
<td>extra cell when odd</td>
</div>
</tr>
#endif
Result looked like this which is unexpected. I tried changing the place of <div class='row'> and <div class = 'col-s6'>in several ways, but nothing worked. And I couldn't really find a mistake in the code as well . It would be grateful if someone can point where I go wrong while using the columns and row classes.
And I'm using jquery datatables to get the table view.
Add the bootstrap classes to your table elements, instead of adding additional div elements.
<table>
<tr class="row">
<td class="col-md-4">1</td>
<td class="col-md-4">2</td>
<td class="col-md-4">3</td>
</tr>
</table>
I have a table which fills data from database. Though i had use the bootstrap when i kept on decreasing the width of the browser, from one point onward the table is going outside the container. How can i make this responsive ? Following are the attached images
<table class="table table-responsive table-bordered">
<tr>
<th>Spare Id</th>
<th>Part Number</th>
<th>Quantity</th>
<th>Price</th>
<th>Warranty</th>
{{--<th>Description</th>--}}
<th>Spare Image</th>
<th>
<input type="text" class="form-control" id="search" placeholder="Search Spare">
</th>
</tr>
<tbody id="tableModel">
<?php
foreach($spares as $spare){
?>
<tr>
<td ><?php echo $spare->id;?></td>
<td ><?php echo $spare->partNumber;?></td>
<td ><?php echo $spare->quantity;?></td>
<td ><?php echo 'Rs.'. $spare->price;?></td>
<td ><?php echo $spare->warranty;?></td>
<td><?php echo '<img class="img-responsive" src="data:image/jpeg;base64,'.base64_encode( $spare->image ).'"/>';?></td>
<td>
<a class=" btn btn-success btn-sm" data-toggle="modal" data-target="#modalEdit" onclick="EditBrand('<?php echo $brand->brandName;?>','<?php echo $brand->id;?>')" >Edit </a>
<a onclick="DeleteBrand(<?php echo $brand->id;?>)" style="" class=" btn btn-danger btn-sm" >Delete </a>
</td>
</tr>
<?php }?>
</tbody>
</table>
If you use bootstrap. Wrap your table in a div with table-responsive class.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
That should work if bootstrap is correctly integrated. Please show your code. Many more people would help you.
You can find this specific information here:
https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables
I have worked a lot n this issue and found a good solution for this bootstrap table responsiveness issue. Just use the CSS below:
.table{
display: block !important;
overflow-x: auto !important;
width: 100% !important;
}
Add this line, that will solve your problem.
<div class='table-responsive'>
<div style="overflow-x:auto;">
Make sure you checked you have inserted enough data in table. Sometimes there is just not enough data to trigger 'table-responsive' property.
Using this code:
<div class="details">
<strong>Publisher:</strong>
<span class="red"><asp:Label ID="LabelPublisher" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Author:</strong>
<span class="red"><asp:Label ID="LabelAuthor" runat="server"></asp:Label></span>
</div>
<div class="details">
<strong>Year:</strong>
<span class="red"><asp:Label ID="LabelYear" runat="server"></asp:Label></span>
</div>
...text on browser appears like this:
Publisher: publisher1
Author: author1
Year: 2014
Now using CSS I want to shift text like this on each label:
Publisher:---Publisher1
Author:-----Author1
Year:------ 2014
You can give fixed min width to strong tag
.details strong {
display: inline-block;
min-width: 100px;
}
DEMO
You should use a table for displaying text in that way.
Here is an example: http://jsfiddle.net/h8tshvty/
<table>
<tr class="details">
<td><strong>Publisher:</strong></td>
<td class="red">Publishername</td>
</tr>
<tr class="details">
<td><strong>Author:</strong></td>
<td class="red">Author name</td>
</tr>
<tr class="details">
<td><strong>Year:</strong></td>
<td class="red">Yearnumber</td>
</tr>
</table>
I use the latest twitter bootstrap and I have some troubles with pre tag inside table cells, if line is too long it should create horizontal scroll but it won't happen.
http://jsfiddle.net/52VtD/6958/ example without pre
<div class="row">
<div class="container">
<div class="col-md-3" style="border: 1px solid red;">
this is col-md-3? yes :)
<table class="table">
<thead>
<tr><th>author</th><th>content</th></tr>
</thead>
<tbody>
<tr><td>somebody</td><td></td></tr>
</tbody>
</table>
</div>
<div class="col-md-9" style="border: 1px solid black;">test</div>
</div>
</div>
http://jsfiddle.net/52VtD/6959/ example with pre
<div class="row">
<div class="container">
<div class="col-md-3" style="border: 1px solid red;">
this is col-md-3? no :(
<table class="table">
<thead>
<tr><th>author</th><th>content</th></tr>
</thead>
<tbody>
<tr><td>somebody</td><td>why I cannot wrap it?<br/><pre><?php<br/>class A<br/>{<br/> function foo()<br/> {<br/> if (isset($this)) {<br/> echo '$this is defined (';<br/> echo get_class($this);<br/> echo ")\n";<br/> } else {<br/> echo "\$this is not defined.\n";<br/> }<br/> }<br/>}<br/><br/>class B<br/>{<br/> function bar()<br/> {<br/> // Note: the next line will issue a warning if E_STRICT is enabled.<br/> A::foo();<br/> }<br/>}<br/><br/>$a = new A();<br/>$a->foo();<br/><br/>// Note: the next line will issue a warning if E_STRICT is enabled.<br/>A::foo();<br/>$b = new B();<br/>$b->bar();<br/><br/>// Note: the next line will issue a warning if E_STRICT is enabled.<br/>B::bar();<br/>?></pre></td></tr>
</tbody>
</table>
</div>
<div class="col-md-9" style="border: 1px solid black;">test</div>
</div>
</div>
I have no idea what I can do, I tried many times with css properites.
try to use:
<pre><code> your example code here </code></pre>