ErrorException in cellmap using DomPDF - laravel-5

I'm trying to generate a PDF usin DomPDF, I'm working on Laravel 5.0, It was working a while ago but then when I added the table I get this error:
ErrorException in cellmap.cls.php line 676:
Undefined offset: 688
The HTML code that I'm trying to include is this, there's all the HTML of the view:
<!-- Content Wrapper. Contains page content -->
<div class="col-sm-12">
<!-- Content Header (Page header) -->
<section >
<h1>
Reporte Academico
<small>Prof. Malika VonRueden MD</small>
<small class="pull-right small">Creado: 2015-12-04</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<!-- /.row -->
<div class="row">
<!-- INICIO DETALLE-->
<section class="invoice">
<!-- title row -->
<div class="row">
<!-- /.col -->
</div>
<!-- info row -->
<div class="row invoice-info">
<!-- /.col -->
<!-- Datos Perfil-->
<section class="invoice">
<!-- title row -->
<div class="row">
<div class="col-xs-12">
<h2 class="page-header">Prof. Malika VonRueden MD
</h2>
</div>
<!-- /.col -->
</div>
<!-- info row -->
<div class="row invoice-info">
<!-- Datos Perfil-->
<div class="col-md-9 invoice-col">
<strong>Apellidos:</strong>
<b>Monahan</b>
<br>
<strong>Nombres:</strong>
<label>Prof. Malika VonRueden MD</label>
<br>
<strong>Edad:</strong>
<label>18</label>
<br>
<strong>Profesion:</strong>
<label>illum</label>
<br>
<strong>Documento de Identidad:</strong>
<label>CED 850574611</label>
<br>
<strong>Telefono:</strong>
<label>863)-58123956</label>
<br>
<strong>Telefono movil:</strong>
<label>733-52524688</label>
<br>
<strong>Correo electronico:</strong>
Althea.Labadie#Brown.info
<br>
<strong>Direccion de residencia:</strong>
<address>38583 Robel Mall
New Morganstad, OH 85126.Barrio Watersmouth</address>
<br>
</div>
<div class="col-sm-3 invoice-col">
<address>
<img src="http://localhost/passport/passport/public/adminlte/dist/imgAvatar/avatar.png" class="img-circle">
</address>
</div>
<!-- /.col -->
<!-- Fin Datos Perfil -->
<div class="col-md-10" style="margin:auto;float:none">
<h2 style="text-align: center;">Observaciones</h2>
<table class="table table-striped table-condensed">
<tr>
<th class="bg-primary">Id</th>
<th class="bg-primary">Fecha</th>
<th class="bg-primary">Responsable</th>
<th class="bg-primary">Tipo</th>
<th class="bg-primary">Detalle</th>
</tr>
<tr>
<td>1</td>
<td>2015-12-02 13:58:48</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>2</td>
<td>2015-12-02 16:00:22</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>3</td>
<td>2015-12-02 17:10:13</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>4</td>
<td>2015-12-02 17:10:25</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>5</td>
<td>2015-12-02 17:10:40</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>6</td>
<td>2015-12-02 19:38:26</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>7</td>
<td>2015-12-02 19:39:48</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>8</td>
<td>2015-12-02 19:40:35</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>9</td>
<td>2015-12-02 19:49:55</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>10</td>
<td>2015-12-02 19:51:12</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>11</td>
<td>2015-12-02 19:55:30</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>12</td>
<td>2015-12-02 19:55:47</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>13</td>
<td>2015-12-02 21:19:14</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
<tr>
<td>14</td>
<td>2015-12-02 21:34:26</td>
<td>Prof. Conrad Hermann Schultz</td>
<td>S</td>
<td>Datos actualizados</td>
</tr>
</table>
</div>
</div>
<!-- /.row -->
</section>
<!-- Fin Datos Perfil -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<!-- FIN DETALLE-->
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer" style="margin-left:0px">
<div class="pull-right hidden-xs">
<b>Reporte creado en</b> 2015-12-04
</div>
<strong>Copyright © 2014-2015 Passport.</strong> All rights reserved.
</footer>
</div>
</body>

for future visitors, the problem is with bootstrap that doesn't work well with DomPDF, for that the recomendation is to use this library
The same for users of Foundation

Related

Tailwind CSS table not applying styles

I'm currently learning basic Laravel and have already installed the laravel breeze starter kit.
Currently trying to display a table but the tailwind CSS is not being applied to this table:
This is the code i've copied from the tailwind documentation:
<table class="table-auto">
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>
I've inserted the code into a blade file as below:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Cases') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<table class="table-auto">
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</x-app-layout>
webpack.mix.js already has tailwindcss included as shown below:
I've also run npm run dev
What am I missing here?
You've only specified how the table columns behave given the contents of each cell. The style you've applied (class="table-auto" is occurring, but you don't notice it since the table width isn't being constrained by any parent element.
Make the screen narrower with the code as-is and you should see the long text in the first row start to wrap.
Additionally the documentation example only shows you the relevant class (table-auto) and not all the other styling. Here's what's really being rendered:
<table class="border-collapse table-auto w-full text-sm">
<thead>
<tr>
<th class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">Song</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">Artist</th>
<th class="border-b dark:border-slate-600 font-medium p-4 pr-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">Year</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-slate-800">
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">Malcolm Lockyer</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pr-8 text-slate-500 dark:text-slate-400">1961</td>
</tr>
<tr>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">Witchy Woman</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">The Eagles</td>
<td class="border-b border-slate-100 dark:border-slate-700 p-4 pr-8 text-slate-500 dark:text-slate-400">1972</td>
</tr>
<tr>
<td class="border-b border-slate-200 dark:border-slate-600 p-4 pl-8 text-slate-500 dark:text-slate-400">Shining Star</td>
<td class="border-b border-slate-200 dark:border-slate-600 p-4 text-slate-500 dark:text-slate-400">Earth, Wind, and Fire</td>
<td class="border-b border-slate-200 dark:border-slate-600 p-4 pr-8 text-slate-500 dark:text-slate-400">1975</td>
</tr>
</tbody>
</table>

Perform conditions in ThymeLeaf in Spring Boot project

I am using Spring Boot Thymeleaf and wanted to take conditional based decision. If condition matches, then whole row should be green else red
<body>
<div class="container my-2">
<h1>Active Workflow Details</h1>
<div class="card">
<div class="card-body">
<div th:switch="${mdsAcives}" class="container my-5">
<div class="col-md-10">
<h2 th:case="null">No record found !!</h2>
<div th:case="*">
<table border="1" class="table table-striped table-responsive-md">
<thead>
<tr>
<th>Mapping Name</th>
<th>Type of Mappings</th>
<th>Table Names</th>
<th>System 1 Count </th>
<th>System 2 Count </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="m : ${mdsAcives}">
<td th:text="${m.mappingName}"></td>
<td th:text="${m.type}"></td>
<td th:text="${m.tableName}"></td>
<td th:text="${m.system1Cnt}"></td>
<td th:text="${m.system2Cnt}"></td>
<td th:style="${m.system1Cnt} eq ${m.system2Cnt} ? 'color: red;' : 'color: green;'}}" th:text="TRUE or FALSE"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You can do something like this:
<tr th:class="${your condition}? 'green' : 'red'">
I assume you have defined two CSS classes to make the row green or red.

Add user email addresses separated by commas in Laravel

I want to add the selected users to a separate table from the list of all users. Similar to the Trello feature, just # and tag their name. I have no idea what to write this function. Any ideas?
This is the form on my interface, and I do not know what to do next in the controller and the form block.
<div class="tab-pane fade" id="group-add-members" role="tabpanel">
<div class="users-manage" data-filter-list="form-group-users">
<div class="mb-3">
<div class="form-group row">
<textarea class="form-control col" name="group-description"
placeholder="Add users by email, each email separated by
commas
e.g: matt#.edu.com, joe#edu.com" rows="3">
</textarea>
</div>
<div class="row align-items-center">
<div class="col">
<button class="btn btn-outline-primary" type="button">
<i class="fad fa-user-plus"></i>Add</button>
<span>   or   </span>
</div>
<div class="d-none d-md-block col-4 col-lg-5 text-right">
</div>
</div>
<div class="row align-items-center mt-2">
<div class="d-block d-md-none d-sm-block ml-2">
</div>
</div>
</div>
<hr>
<h6>Member info</h6>
<div class="row justify-content-center">
<div class="table-responsive mt-3">
<table class="stripe" id="example" style="width:100%">
<thead>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>\
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-left">My name</td>
<td class="text-left">qnv164#edu.com</td>
<td class="text-left">123456789</td>
<td>
<span class="ic-dark"><i class="fad fa-trash-alt"></i></span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- end div table responsive -->
</div>
<!-- end div row -->
</div>
</div>
{{ profile->description ?? 'Not Available' }}

How to call images in public folder in laravel 5.4

My question is very simple
I am trying to call this source in my public folder in img folder:
src="img/vcc3logo.png"
But I can't display it on my pdf print form
When the customer print for a certification form it needed to display the image. The file of the print.blade.php is located in resources/views/customer-relations/dashboard/print.blade.php
Here is the code in my print.blade.php
{{-- <div class="content">
<div class="clearfix"></div>
<div class="box-body"> --}}
<img src="" height="50" width="50" style="float: right">
<img src="img/vcc3logo.png" height="50" width="50" style="float: left">
<div class="container">
<div class="row">
<div class="text-center">
<p class="text-center maliit">
Republic of the Philippines<br>
National Capital Region<br>
<font>City Government of Valenzuela</font><br>
Office of the City Mayor<br>
Valenzuela City Command and Communications Center<br>
2nd Floor, City ALERT Center, Mc-Arthur Hi-way, Malinta, Valenzuela City<br>
</p>
<h3>Application Number:{{ $application_number }}</h3>
</div>
<h5><b>Business Name:</b> {{ $business_name }}</h5>
<h5><b>Owner:</b> {{ $owner }}</h5>
<h5><b>Location:</b> {{ $location }}</h5>
</span>
<table class="table table-hover">
<thead>
<tr>
<th>Fees</th>
<th></th>
<th class="text-center"></th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9"><em>Inspection Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $inspection_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Certificate Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $cert_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Local Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $local_fee }}</td>
</tr>
<tr>
<td class="col-md-9"><em>Others Fee:</em></h4></td>
<td class="col-md-1" style="text-align: center"></td>
<td class="col-md-1 text-center"></td>
<td class="col-md-1 text-center">{{ $others_fee }}</td>
</tr>
</tbody>
</table>
<p><i>Note: Please print and present to Customer Relations Officer</i></p>
</td>
</div>
{{-- </div>
</div>
</div>
--}}
I tried to change it to
src="url('/img/cctv_camera.jpg')"
but ended up with this error:
(1/1) RuntimeException
The exit status code '1' says something went wrong:
stderr: "Loading pages (1/6)
If image file is located inside public folder then you need to add asset() which give full path of image like
<img src="{{asset('/img/vcc3logo.png')}}" height="50" width="50" style="float: left">
I think you can try this hope its help for you :
<img src="{{url('')}}/img/vcc3logo.png" height="50" width="50" style="float: left">
OR
<img src="{{asset('/img/vcc3logo.png')}}" height="50" width="50" style="float: left">
Hope this work for you !!!

HTML signature leaves big spaces between rows (Gmail App from Outlook)

This is how it looks in GMail mobile app when sent from Outlook:
How can I avoid those big gaps?
My code is as follows:
<table id="sig" width='320' cellspacing='0' cellpadding='0' border-spacing='0' style="width:320px;margin:0;padding:0;">
<tr>
<td valign='top' width="120" height="48" style="width:120px;height:48px;margin:0;padding:0;vertical-align:top;">
<a style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/logo.jpg" alt="Crisalix" width='120' height='48' style="border:none;width:120px;height:48px;display:block;">
</a>
</td>
</tr>
<tr>
<td>
<table id="sig1" cellspacing='0' width='320' cellpadding='0' border-spacing='0' style="padding:0;margin:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;mso-line-height-rule:exactly;line-height:11px;color:#b0b0b0;border-collapse:collapse;-webkit-text-size-adjust:none;width:320px;">
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;">
<span style="color:#137191">Jaime</span>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1">
<span style="color:#555555">Chief Executive Officer</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="width:320px;margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-size:12px;line-height:1.4;">
<div><span style="color:#137191;font-weight:bold">P / </span><span style="color:#555555;"></span></div>
<div><span style="color:#137191;font-weight:bold">A / </span><span style="color:#555555">Parc Scientifique (PSE-A) - EPFL1015</span></div>
<div> <span style="color:#555555"> Lausanne | Switzerland </span></div>
</td>
</tr>
<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:sans-serif,Arial,'Helvetica Neue',Helvetica;white-space:nowrap;font-weight:600;line-height:1.6;font-size:13px;width:320px;">
<span style="color:#137191;border:none;text-decoration:none!important;color:#137191;">www.crisalix.com</span>
</td>
</tr>
<tr>
<td valign='top' width="27" height='21' style="width:27px;height:1px;margin:0;padding:0;vertical-align:top;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/separator.jpg" alt="Crisalix" width='27' height='21' style="border:none;width:27px;height:21px;display:block;">
</td>
</tr>
</td>
</table>
</tr>
<tr>
<td valign='top' width="230" height="225" style="width:230px;height:225px;margin:0;padding:0;vertical-align:top;">
<a href='http://www.crisalix.com' title="Crisalix" style="border:none;text-decoration:none;">
<img moz-do-not-send="true" src="https://s3.amazonaws.com/media_crisalix/signatures/signature-banner.jpg" alt="Crisalix" width='230' height='225' style="border:none;width:230px;height:225px;display:block;">
</a>
</td>
</tr>
</table>

Resources