I'm having issues using DOMPDF and Laravel Blade. I'm using DOMPDF to render a blade view into PDF following their documentation, but when I have records that span more than a page, it cuts them off. It's like overflow:hidden is added to the page so the records won't show. You can see by the image below. You can clearly see there is another record at the bottom, but the next page is qualifications, not the next record in the list.
I have tried using page breaks and all sorts to try and get this working, but for the life of me this just does not want to play ball.
I can't find anything in their documentation that suggests this is an issue and I'm not sure what's causing it.
Package used: barryvdh/laravel-dompdf
The rendered PDF:
The section of the view that's being loaded:
Please excuse the tables, but as PDFs don't load CSS3, I have to go back to basics to get the proper styling results needed for the PDF.
<tr>
<td class="border-b-4 border-grey-200 pb-5 mb-5">
<table width="100%" class="mb-5" style="width:100%" border="0" cellpadding="0">
<tr>
<td>
<h1 class="text-6 text-grey-700 mb-3">Employment History</h1>
</td>
</tr>
</table>
#foreach ($employers as $employer)
<table width="100%" class="mb-5" style="width:100%" border="0" cellpadding="0">
<tr>
<td class="border border-grey-200 p-5 rounded">
<h2 class="capitalize text-grey-700 text-lg">{{ $employer->job_title }}</h2>
<span class="text-grey-600">{{ $employer->employer_name }}</span>
<p class="my-3 text-blue-500 text-sm">
<span>{{ date('jS F Y', strtotime($employer->from_date)) }}</span>
<span> — </span>
#if ($employer->current != 1)
<span>{{ date('jS F Y', strtotime($employer->to_date)) }}</span>
#else
<span>Present</span>
#endif
</p>
<div class="markdown text-grey-700">{!! $employer->description !!}</div>
</td>
</tr>
</table>
#endforeach
</td>
</tr>
The PDF controller:
PDF::setOptions([
'dpi' => 150,
'defaultFont' => 'sans-serif',
'fontHeightRatio' => 1,
'isPhpEnabled' => true,
]);
$pdf = PDF::loadView('pdf_cv', [
'cv' => $cv,
'awards' => $awards,
'employers' => $employers,
'hobbies' => $hobbies,
'images' => $images,
'languages' => $languages,
'projects' => $projects,
'qualifications' => $qualifications,
'skills' => $skills
]);
return $pdf->stream();
I've done the Googling, read their documentation countless times and I'm bemused by this issue, so hopefully, someone else has experienced this too and can lend a helping hand.
If you need more information, I can provide it.
The issue with this was the table setup. I don't know exactly what was happening because you can't inspect PDFs but the table seemed to keep overlapping causing it run off the page.
Related
I apologize in advance if my question is silly-- Vue newbie here but very eager to learn!
In order to create an interface to manage user privileges in a web app, I've made a component in which I want to create a table with nested v-fors.
For each row, I want 5 cells (): the first one includes text depending on the current iteration of object permisos and the other 4 should be created from the object tipos_permisos (which is an object with 'fixed' values).
The problem:
When I try to compile, I get multiple errors claiming that some tags have no matching end tag. I assume it is due to the v-for nested inside another v-for and/or the v-if inside the innermost v-for... or something like this. The claim is that has no matching tag or that the element uses v-else without corresponding v-if :/
I've tried writing out the last 4 cells manually (without using the tipos_permisos object) but even then, I get errors. In this case, claiming that , and have no matching end tag.
The desired result:
Please note that for some of the resources listed, some of the privileges might not apply (i.e., the log viewer is read-only always so it doesn't have the C (create), U (update) or D (delete) privileges, hence the conditional to show either a checkbox or an icon)
My component:
<template>
<form :action="usr.url.savepermisos" method="post" class="">
<div class="card">
<div class="card-header bg-gd-primary">
<h3 class="card-title">Privilegios de {{ usr.nombre }}</h3>
</div>
<div class="card-content">
<p class="mb-3">
El usuario
<span class="font-w700">{{ usr.nombre }}</span>
tiene los siguientes privilegios:
</p>
<table class="table">
<thead>
<tr>
<th>Recurso</th>
<th>Alta / Creación</th>
<th>Visualización</th>
<th>Edición</th>
<th>Eliminación</th>
</tr>
</thead>
<tbody>
<tr v-for="(recurso, idxrecurso) in permisos">
<td :data-order="recurso.id">{{ recurso.etiqueta }}</td>
<td class="align-middle" v-for="(color,tp) in tipos_permisos">
<label :class="'checkbox checkbox-' + color + ' mycheckbox'" v-if="(typeof recurso[tp] !== "undefined")">
<input type="checkbox" class="checkbox-input check_permiso" />
<span class="checkbox-indicator"></span>
</label>
<i class="fas fa-minus-square fa-lg text-muted" data-toggle="tooltip" title="N/A" v-else></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</template>
<script>
export default {
data() {
return {
tipos_permisos: {
'C': 'success',
'R': 'info',
'U': 'warning',
'D': 'danger'
}
}
},
props: [
'usr',
'permisos',
'perm_log'
]
}
</script>
If something is unclear please let me know so that I can provide further info.
There is a missing "=" after v-for:
<td class="align-middle" v-for"(color,tp) in tipos_permisos">
I didn't understand this part:
v-if="(typeof recurso[tp] !== "undefined")"
If undefined in your code is a string, your condition should be
v-if="recurso[tp] !== 'undefined'"
If it's a real undefined, it should be like this:
v-if="recurso[tp] !== undefiened"
I Building an Affiliate System for my Users. Registration with ID works fine and save all correct in my DB, but i cant see any Referrals that use my URL ID for Registration in my Example Blade.
Any one cant find the Error?
Controller:
$referal_id = $user->id;
$referer_id = $request['referal_id'];
$referalUserData = [
'referer_id' => $referer_id,
'referal_id' => $referal_id,
];
$insert = ReferralUser::insert($referalUserData);
Blade:
<tr>
<th>#</th>
<th>User Id#</th>
<th>User Name</th>
<th>Registration Time</th>
</tr>
</thead>
<tbody>
#if(!empty($referalUser))
#foreach($referalUser as $referData)
<tr>
<th scope="row">{{$referData->id}}</th>
<td>{{$referData->referal_id}}</td>
<td>#for($i=0;$i<count($referData['names']);$i++) {{$referData['names'][$i]['name']}} #endfor
</td>
<td> {{$referData->created_at}}<br/> <span class="label label-primary">
{{Carbon\Carbon::createFromTimestamp(strtotime($referData->created_at))->diffForHumans()}} </span> </td>
</tr>
#endforeach
#else
<div class="alert alert-noreferals">
<strong></strong><span>No referrals!</span>
</div><br/><br/>
#endif
Ignore the created_at Timestamp.
Thanks
Did you convert the $request object to an array?
$request['referal_id'];
That looks suspicious. Typically you would use
$request->input('referal_id')
or via dynamic properties
$request->referal_id
To access a given value.
Are you getting an error? Anything in the log files?
In my ImageController, I've moved an image to a directory and saved the image path in a table in database as,
public function store(Request $request)
{
$new_country = new SelectCountry();
$message = [
'required' => "This field can not be empty",
];
$this->validate($request, [
'country_name' => 'required',
'alternate_title' => 'required',
'country_flag' => 'required',
], $message);
$new_country->country_name = $request->country_name;
$new_country->alternate_title = $request->alternate_title;
if($request->hasfile('country_flag'))
{
$country_flag_image = $request->file('country_flag');
$country_flag_name = $country_flag_image->getClientOriginalName();
$extention = $country_flag_image->getClientOriginalExtension();
$dirpath = public_path('assets/images/country/');
$country_flag_image->move($dirpath,$country_flag_name);
$new_country->country_flag_path = $dirpath.$country_flag_name;
}
$new_country->save();
return redirect()->route('admin.country');
}
Now I want to use the path and display the image along other informations. I've used the following code to return view,
public function select_country()
{
$countries = SelectCountry::all();
return view('auth.select_country')->with('countries',$countries);
}
And in the view, I've used following code to display datas stored in the database,
<table class="table-hover table-responsive container-fluid col-xs-12 col-sm-12">
<thead>
<tr>
<th>Country Name</th>
<th>Alternate Title</th>
<th>Country Flag</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach($countries as $country)
<td>{{ $country->country_name }}</td>
<td>{{ $country->alternate_title }}</td>
<td><img src="{{ $country->country_flag_path }}"></td>
<td>
<a type="button" href="" class="btn btn-warning btn-xs">Update</a>
<a type="button" href="" class="btn btn-danger btn-xs">Delete</a>
</td>
#endforeach
</tbody>
The problem is the image is not displayed while other informations are displayed. The src attribute in img tag is returning path but not directory.
If there is any solution, please tell me. Thanks.
I think your issue lies with where you are setting the storage folder. Laravel with automatically reference the public folder for storage of images etc so there's no need for the public_path function.
Try setting your $dirpath to just $dirpath = "/asset/images/country" as Laravel looks inside public by default. You can then reference it by doing <img src="{{ $country->country_flag_path }}">
Then upload a new image and see what the database has the path set to, hopefully it should be a bit more normal :)
Please note that my original answer of:
Try setting your $dirpath to just $dirpath = "images/country" as Laravel looks inside public by default. You can then reference it by doing <img src="{{ asset($country->country_flag_path) }}">
Should still work as it's how I've always done it :)
I am trying to click on checkbox (which represents as ) in Firefox using Watir. I have code left to me from the previous tester, and this code works in Chrome, but not Firefox.
Here is what I have.
Here is the code that leads to this div:
<div class="x-grid3-body" style="width:515px;" id="ext-gen201">
<div class="x-grid3-row x-grid3-row-first" style="width:515px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:515px;">
<tbody>
<tr>
<td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 158px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-0 x-unselectable" unselectable="on">Organisation</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-1 " style="width: 298px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-1 x-unselectable" unselectable="on">Catch Software</div>
</td>
<td class="x-grid3-col x-grid3-cell x-grid3-td-scopeCheckColumn x-grid3-cell-last x-grid3-check-col-td" style="width: 53px;" tabindex="0">
<div class="x-grid3-cell-inner x-grid3-col-scopeCheckColumn x-unselectable" unselectable="on">
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What I need essentially is to click on this div
<div class="x-grid3-check-col x-grid3-cc-scopeCheckColumn"> </div>
I can't attach screenshots (rating is low), but this div is the checkbox that I need to click.
This piece of code works in Chrome:
#browser.div(:class => 'x-box-inner', :index => 1).table(:class => 'x-grid3-row-table').td(:text => 'Organisation').parent.td(:index => 2)
But in Firefox I can see that Watir is just click on the whole parent div (can see selection appear in browser), not on the checkbox div.
Thank you.
First off, there is only one element in the html you've showed that has the class 'x-grid3-cc-scopeCheckColumn', so is there a reason you can't do:
#browser.td(class: 'x-grid3-cc-scopeCheckColumn').click
If not, you can simplify your element location drastically to get the td you want, since there is only one td that has the text 'Organisation', and .parent would only get the td above it, but it looks like you want the tr tag above that, so perhaps you want:
#browser.td(text: 'Organisation').parent.parent.td(index: 2)
Using an XPath worked for me in Firefox:
#browser.div(:xpath, "//*[#id='ext-gen201']/div/table/tbody/tr/td[3]/div/div").click
I was able to verify it with .flash in place of .click since your div just contains a space and there was nothing to otherwise see.
This view works well with IE9 and Chrome. However, not with IE8.
When the page is rendered, this is how it looks like:
My HTML (MVC3 View) is as shown below.
<div id="machinedisplay" data-bind="with: selectedMachine" >
<h2><span data-bind="text: MachineDesciption" /></h2>
<!-- ko with: my.vm.machineData -->
<table>
<thead><tr>
<th>Point Name</th><th>Description</th><th>Points Data</th>
</tr></thead>
<tbody data-bind="foreach: Points">
<tr>
<td data-bind="text: PointName()"></td>
<td data-bind="text: PointDesciption()"></td>
<td>
<table style="width:100%;">
<thead><tr>
<th>Name</th><th>Description</th><th>Value</th><th></th>
</tr></thead>
<tbody data-bind="foreach: Params">
<tr>
<td data-bind="text: ParameterName"></td>
<td data-bind="text: ParameterDescription"></td>
<td data-bind="text: StringValue"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
</div>
Any ideas on IE8 work around?
EDIT:
To illustrate this problem on a simpler model, check out this fiddle http://jsfiddle.net/ericpanorel/nzKvb/
I figured that I am running into problems because I am using the "with" or "if" bindings. I read somewhere that this causes problems with IE8.
I used IE9, and if you use your developer tools to switch from IE9 to IE8, this Fiddle doesn't work properly anymore. This fiddle is actually derived from one of knockout's samples (http://knockoutjs.com/examples/gridEditor.html)
EDIT:
I updated the fiddle... http://jsfiddle.net/nzKvb/20/
It has something to do with short-hand closing of tags inside the nested containerless bindings
<!-- ko if: Allowed-->
<h2>
<span data-bind="text: Dummy"/> <===== This will bomb in IE8
</h2>
The jsFiddle had an extra comma at the end of the array, which IE8 was treating as a null object:
var viewModel = new GiftModel([
{ name: "Tall Hat", price: "39.95"},
{ name: "Long Cloak", price: "120.00"},
{ name: "HK 416", price: "2420.00"}, <-- HERE !!!
]);
ko.applyBindings(viewModel);
The fiddle works fine without the comma:
http://jsfiddle.net/XPMUA/
Not sure if this solves your underlying problem but at least the fiddle is working now :-)
The problem is here because
<!-- ko if: Allowed-->
Older IE versions can be picky about using JavaScript reserved words
for property names.
So you should write 'if'
Check Same problem in another link!