please i need help
i have my html code which working very fine ,and trying to loadview it as pdf stream
but the output pdf file , not same as html , and text not above image , but get below it
my controller code
public function pdfdownload($id)
{
$id = Crypt::decrypt($id);
$course = Course::where('id', $id)->first();
$orders = Order::where('course_id', $id)->first();
$progress = CourseProgress::where('course_id', $course->id)->where('user_id', Auth::user()->id)->first();
$pdf = PDF::loadView('front.certificate.download', compact('course', 'progress'), [],
[
'title' => 'Certificate',
'orientation' => 'L'
]);
// return $pdf->download('certificate.pdf');
return $pdf->stream('certificate.pdf');
}
my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,h2,h3,h4,h5,h6{
margin: 0 0 15px;
}
.certificate-wrapper{
max-width: 910px;
border: 1px solid #007B83;
}
.certificate-wraper img {
max-width: 100%;
}
/* certificate Antipasto Pro */
.certificate_content {
position: absolute;
top: 182px;
right: 29px;
width: 480px;
}
.certificate_content h2 {
font-size: 29px;
text-transform: uppercase;
color: #29AFA7;
margin-top: 10px;
}
.certificate_content h3 {
text-transform: uppercase;
color: #29AFA7;
font-size: 21px;
}
.certificate_content span {
text-transform: uppercase;
}
.prisciples {
font-size: 25px;
margin-top: 39px;
}
.credit {
margin-top: 27px;
}
.prof {
margin-top: 28px;
}
.date_time {
display: block;
margin-top: 66px;
margin-left: 99px;
color: #000;
font-size: 18px;
}
.code {
margin-top: 22px;
display: block;
margin-left: 83px;
font-size: 14px;
}
/* certificate-end */
.position-relative{
position: relative;
}
</style>
</head>
<body>
<div class="certificate-wrapper">
<div class="certificate-wraper position-relative certificater-img">
<img src="certi-main-bg.png" alt="">
<div class="certificate_content">
<h2>Basma sherif abd alwahab</h2>
<h3 class="prisciples">Principles of Dento-alveolar Surgery
with Live Demo on Suture Techniques</h3>
<h3 class="credit">2 creidt hours</h3>
<h3 class="prof">Prof.Ahmed Elsharkawy</h3>
<div class="certi_abs_content">
<span class="date_time"> april</span>
<span class="code">code</span>
</div>
</div>
</div>
</div>
</body>
</html>
that how img show in html page
html view
that's how pdf stream output looks like
pdf stream
please i would really appreciates any help
, how to solve that
and why pdf not view same as html >?
I think your main issue is that laravel-pdf is a wrapper for mPDF which does not support flex.
See this list for css that is supported: https://mpdf.github.io/css-stylesheets/supported-css.html
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
I have an issue with Dompdf not positioning images correct.
The output in browser is ok, but the images are to close to the title in the PDF.
They should also render over the blue bar. I thought this should be possible with either a negative margin-top or a position absolute. But from what I read is that position:absolute inside a position:relative container is (still) not working.
HTML and expected output:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
PDF renders as follows:
Screenshot
PHP Code:
$dompdf_options = new \Dompdf\Options();
$dompdf_options->set('isRemoteEnabled', true);
$dompdf_options->set('chroot', $dirname);
$dompdf = new \Dompdf\Dompdf($dompdf_options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();
This is an issue with how Dompdf aligns element within a line box. There is an ongoing effort to address the issue (WIP).
With the current release you can work around the issue by moving your image block down using relative positioning. You'll also want to set z-indexing a bit differently to better accommodate how Dompdf renders elements.
Try the following:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
z-index: 99;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
top: 40px;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
Follow your issue for updates
I recently began to learn sass and I'm having a problem with media query. Some classes works and others don't, like toggle class.
Here is the code I'm working on:
body {
font-family: sans-serif;
}
nav {
width: 100%;
background: #00316b;
}
nav ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 20px;
}
nav li:hover {
background: #e91e63;
}
nav a {
color: #fff;
text-decoration: none;
}
nav .toggle {
padding: 10px 20px;
box-sizing: border-box;
color: #f7f7f7;
font-size: 30px;
cursor: pointer;
width: 30px;
display: none;
}
nav .toggle:hover div {
width: 30px;
}
nav .toggle div {
height: 4px;
background: white;
margin: 5px 0;
border-radius: 25px;
transition: all 0.3s ease-in-out;
}
nav .toggle .one {
width: 30px;
}
nav .toggle .two {
width: 20px;
}
nav .toggle .three {
width: 25px;
}
#media (max-width: 768px) {
.toggle {
display: block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<!-- font awesome -->
<script src="https://use.fontawesome.com/495f5a11b6.js"></script>
<title>Document</title>
</head>
<body>
<nav class='navigation'>
<div class="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Put the media query inside your .toggle class by indenting 2 levels and remove the other .toggle from your query.
.toggle
// etc ...
#media (max-width: $breakpoint)
display: block
I forked your snippet here: https://codepen.io/anon/pen/ooqxyW
at the moment i get in touch with laravel. i tried to create a page who scan qr codes.
i created a normal project with laravel (composer create-project laravel/laravel testqrinstascan) and tried to implement step by step instascan.
I wanna use this library instascan -> https://github.com/schmich/instascan
But i get everytime the error "Laden fehlgeschlagen für das mit der Quelle "http://localhost:8000/instascan.min.js"."
but the file is in the same directory
It means loading script with source .... not possible -> https://imgur.com/a/SKang
This is my welcome.blade.php------------------------------------------------------------------------
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<script type="text/javascript" src="instascan.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="links">
<video id="preview"></video>
Hello World
<script type="text/javascript">
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script>
</div>
</div>
</div>
</body>
In the following example I want to sort the inner lists and not the other list. In my live example the lists are generated by the grouped list functionality, so I can't give each list an id and create a separate sortable object. How do I create a sortable set of inner lists using kendo native listview grouping?
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Unable to sort inner list in kendo nested list">
<base href="http://demos.telerik.com/kendo-ui/sortable/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<ul class="playlist" kendo-sortable k-placeholder="placeholder" k-hint="hint">
<li>Happy
<ul>
<li>Papercut <span>3:04</span></li>
<li>One Step Closer <span>2:35</span></li>
<li>With You <span>3:23</span></li>
<li>Points of Authority <span>3:20</span></li>
<li>Crawling <span>3:29</span></li>
</ul>
</li>
<li>Sad
<ul>
<li>Runaway <span>3:03</span></li>
<li>By Myself <span>3:09</span></li>
<li>In the End <span>3:36</span></li>
<li>A Place for My Head <span>3:04</span></li>
<li>Forgotten <span>3:14</span></li>
<li>Cure for the Itch <span>2:37</span></li>
<li>Pushing Me Away <span>3:11</span></li>
</ul>
</li>
</ul>
</div>
<style>
.playlist {
margin: 30px auto;
padding: 10px;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
.playlist li {
list-style-type: none;
position: relative;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
.playlist li:hover {
background-color: #dceffd;
}
.playlist li span {
position: absolute;
right: 5px;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.placeholder = function(element) {
return element.clone().addClass("placeholder").text("drop here");
};
$scope.hint = function(element) {
return element.clone().addClass("hint");
};
})
</script>
</body>
</html>
http://jsbin.com/qubuguh/edit?html,output
This can be done by using a filter that describes the child li elements. For example:
<ul class="playlist" kendo-sortable k-filter="'ul>li'" k-placeholder="placeholder" k-hint="hint">