I am create pdf file using dompdf but float property not working. I changed DOMPDF_ENABLE_CSS_FLOAT to true. It works fine in normal php but its not working in laravel 4.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
.left {
float: left;
outline: 1px solid green;
width: 6cm;
}
.right {
float: left;
outline: 1px solid blue;
width: 6cm;
}
</style>
</head>
<body>
<div class="left" style="float:left;">left boxes here</div>
<div class="right" style="float:right;">right boxes here</div>
</body>
</html>
Thank you.
use def("DOMPDF_ENABLE_CSS_FLOAT", true); into the dompdf_config.inc.php file
and use the css float into your pdf design, it works
Related
I can't able to see the image after applying CSS background color.
HTML page:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo base_url(); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
CSS page:
.heading{
background-color: yellow;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
}
span{
color: skyblue;
}
SCREENSHOTS:
The image should be visible after applying the CSS background color.
The images might be having transparent background. In this case it will use the container's background color. Apply a background-color css rule to the img to get a color to your image.
.heading img{
background-color: white;
}
Just in case, base_url(); isn't a valid function (if you haven't written one).
you can use $_SERVER['REQUEST_URI'] it gave you the whole link from your Website back in form of an String. In that case you can use the substr to cut the sting in your form you like.
Here is my Examlpe of your code:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
If you want to know more about base urls take a look here
Enjoy and have fun ;)
--- EDITS: ---
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
</h2>
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png" style>
</div>
<style>
.heading {
background-color: black;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
float: left;
}
span{
color: skyblue;
}
</style>
</body>
</html>
Perhaps this one is better and you can test it with e sperate file so you don't need to change your original.
I'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.
index.php
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Home | Website</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
menu.php
<head>
<title>Menu | Website</title>
<style>
// menu-only styles...
</style>
</head>
<body>
Home
</body>
<?php return; ?>
You're essentially including an HTML page within an HTML page doing it your way.
To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.
Something like this should do what you're looking for, I believe.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
.menu {
/* padding: top&&bottom left&&right; */
padding:10px 0;
background-color: #7786ff;
text-align: center;
}
.menu a {
/* merge transitions into one line to make both functional */
transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
/* padding:top right bottom left */
padding:10px 10px 5px 10px;
}
.menu a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
menu.php
<div class="menu">
Home
</div>
This is not a PHP issue
Your CSS in menu.php comes later in the DOM than your actual stylesheet and therefore is being overwritten. Either scope your menu.php styles with some containing element or put your menu CSS code earlier in the DOM (like before style.css)
You are almost a bit closer to what you code. A HTML page can have only one html,head,title,body tag.
Just remove these html,head,title,body tags from menu.php
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
menu.php
<style>
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #7786ff;
text-align: center;
}
a {
transition: background-color .25s ease-in-out;
transition: padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
</style>
Home
<?php return; ?>
I have a problem converting an HTML file to pdf, when trying to add a footer, the size rendered as PDF is not the one specified in the css.
The size of the footer must be exactly 155mm, but if I tell wkhtml2pdf to have a bottom border of 155mm, the footer starts almost at half of the page.
I have tried with a simpler html page of 50mm with 5 stripes of 10mm each, and with the switch -B 50mm I have a margin below the actual footer of 50mm
The command that I am running is: wkhtmltopdf.exe -B 150mm -L 0 -R 0 -T 0 --footer-html footer.html page.html page.pdf
To have the footer placed correctly, I have to use -B 119mm
Can someone help me or point me to the right direction ? I read many posts about that but could not solve my problem, it seems that windows installation act differently from Linux one, but I will only install it on windows host, so no problem about a windows-only solution
page.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Header</title>
<link rel="stylesheet" href="css/normalize.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
coucou
</body>
</html>
footer.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Footer</title>
<link rel="stylesheet" href="css/normalize.css?v=1.0" media="all">
<link rel="stylesheet" href="css/footer.css?v=1.0" media="all">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bvr">
<div class="bvr-cut">
<div class="payment-recipient">
blahblah
</div>
<div class="payment-account">01-88205-8</div>
<div class="payment-amount">
<span class="val">3</span>
<span class="val">2 5</span>
</div>
<div class="payment-sender">
blahblah
</div>
</div>
<div class="bvr-cut">
<div class="payment-recipient">
blahblah
</div>
<div class="payment-account">01-88205-8</div>
<div class="payment-amount">
<span class="val">3</span>
<span class="val">2 5</span>
</div>
<div class="payment-sender">
blahblah
</div>
</div>
<div class="bvr-code">
<div class="col c12">
blahblah
</div>
</div>
</div>
</body>
</html>
footer.css
#charset "UTF-8";
#bvr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
background: #FC0;
font-family: "Helvetica-Neue", Helvetica, sans-serif;
height:155mm;
page-break-after: auto;
display: block;
clear: both;
border: 1px solid #000;
}
.bvr-cut {
float:left;
width: 230px;
background: #ccc;
}
.payment-recipient {
height: 72px;
position: relative;
background: #0cf;
}
.payment-account {
text-align: right;
font-weight: 600;
padding-right: 4.5em;
margin-bottom: .6em;
background: #12F;
}
.payment-amount {
background: #FCC;
text-align: right;
margin-bottom: .8em;
}
.payment-amount > span.val {
border: 1px solid #000;
padding-right: 2em;
}
.payment-sender {
position: relative;
background: #f0c;
}
.bvr-ref {
display: block;
background: #FF0;
}
.bvr-code {
background: #c0f;
}
After searching, I found out that the problem didn't come from wkhtmltopdf but to a processed size issue in windows systems.
If I run that code on unix based systems everything works great, but on windows it doesn't. In fact, font size (and any other size: height, width, etc.) in windows must be scaled with a 1.33 ratio in order to render exactly the same as it does in unix.
I couldn't find a link in english, but here a little explaination which worked great for me (search "1.33") in the webpage.
Basically, I created two classes in my css:
html: { font-size: 93.1%; }
body: { height: 88mm; }
/*–––––––––––––––––––––––– system hacks –––––––––––––––––––––––– */
/**
* Unix* system based servers render font much
* bigger than windows based server.
* Force windows font to 100% and rescale the
* linux rendering by the magic factor (1.33)
*/
.linux {
font-size: 70%;
}
/**
* base size: 88mm
*
* for wkhtmltopdf generation,
* body size must be multiplied by 1.33 factor on windows systems
*/
.win body {
height: 117.04mm;
}
And with a bit of php, I've added dynamically the class to the <html> tag based on server system.
I'm trying create a template for my control panel
I want make a "Back" button in the template, where I can set your href is set for extended page
So I tried use #yield for set, but not have success
Fallowing my code
// in my template -> layouts.master.blade.php
Back
//my extended page -> user.edit.blade.php
#extends('../layouts.master')
#section('back')
dashboard
#stop
I'm not sure why it's not working for you, but it should. Here's a test I just did on my end. I got a clean Laravel app, renamed home.php to
layout.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel PHP Framework</title>
<style>
#import url(//fonts.googleapis.com/css?family=Lato:700);
body {
margin:0;
font-family:'Lato', sans-serif;
text-align:center;
color: #999;
}
.welcome {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
a, a:visited {
text-decoration:none;
}
h1 {
font-size: 32px;
margin: 16px 0 0 0;
}
</style>
</head>
<body>
<div class="welcome">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACHCAYAAAA850oKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNUVCMTdGOUJBNkExMUUyOTY3MkMyQjZGOTYyREVGMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNUVCMTdGQUJBNkExMUUyOTY3MkMyQjZGOTYyREVGMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI1RUIxN0Y3QkE2QTExRTI5NjcyQzJCNkY5NjJERUYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI1RUIxN0Y4QkE2QTExRTI5NjcyQzJCNkY5NjJERUYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+g6J7EAAAEL1JREFUeNrsXQmU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" alt="Laravel PHP Framework">
<h1>#yield('youhave')</h1>
</div>
</body>
</html>
As you can see I'm using two different yields, wich you'll see in the new
home.blade.php
#extends('layout')
#section('youhave')
You have arrived.
#stop
#section('laraveldotcom')
http://laravel.com
#stop
And it worked fine for me, I could even click the Laravel logo to be redirected to the Laravel site. So you might have a problem somewhere else.
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}