How to center absolutely positioned elements in css for a pdf - php

I'm trying to center the names(#box2) and the topic(#box1) on top of an image.
<?php require_once('seminar_config.php'); ?>
Print
<body>
<?php
$participants = $db->get_results("SELECT participant FROM tbl_participants WHERE state=1");
$topics = $db->get_results("SELECT topic FROM tbl_topics");
if(!empty($participants)){
?>
<?php ob_start(); ?>
<div id="container">
<img src="certificate.jpg"/>
<?php foreach($topics as $a=>$b){ ?>
<?php foreach($participants as $k=>$v){ ?>
<img src="certificate.jpg"/>
<div id="box1" class="common"><?php echo $b->topic; ?></div>
<div id="box2" class="common"><?php echo $v->participant; ?></div>
<?php } ?>
<?php } ?>
</div>
<?php $_SESSION['certificates'] = ob_get_contents(); ?>
<?php ob_flush(); ?>
<?php } ?>
</body>
And here's the script that creates the pdf:
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML('<style>
#box1{
margin-top: 350px;
}
#box2{
margin-top: 200px;
}
.common{
height: 20px;
left: 630px;
right: 630px;
text-align: center;
position: absolute;
left: 0;
top: 0;
font-size:20px;
}
</style>'.
$_SESSION['certificates']);
$html2pdf->Output('random.pdf');
?>
I have no problem with the center positioning of the names and topic if I'm not using html2pdf to generate pdf files.
But if I use html2pdf everything is ruined. Please help me center things in css when using html2pdf.

Most common HTML-to-PDF programs either don't understand CSS, or understand CSS poorly. If your HTML is working, but doesn't translate well to PDF using html2pdf, you might give wkhtmltopdf a shot https://github.com/antialize/wkhtmltopdf

If you want to center .common try following:
.common{
position: absolute;
left: 50%;
top: 0;
font-size:20px;
width:600px;
margin-left:-300px;
}

Old question, but I had similar problem today. Here is how I was able to solve it after trying every method in the history of html and css to center something. I used a table like JorisW:
<table style='width:100%' align='center'>
<tr>
<td>
<img src="image.gif">
</td>
</tr>
</table>

Here is what I use to position divs in center.
Say you want to position div with id=test
CSS
#test {
width: 500px;
margin: 0 auto; //auto margin to left and right
}

Try using tables and inline css styles
<table align="left" width="100%" style="page-break-after:always; margin-top:25px; margin-left:25px; font-family:tahoma; font-size:20px; ">
<tr><td>Your info</td></tr>
</table>

Related

Trouble with coding images side by side with php without using <div> tag in html

My main file is a .php file, and images can be uploaded and displayed from this page. Getting those images to display in three columns has been confusing. It is usually done like this: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp with each image or images placed in div tags. three div tags if you want three columns. In my .php file, images are not written out in the code, so how do I get the images to display in three columns on the page?
I do include one div tag wrapped around the PHP code which is showing the first column.
Here is the CSS code:
.container{
}
.container .heading h3 span{
font-weight: 100;
}
.container .box{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .box .dream{
flex-direction: column;
width: 32.5%;
}
.container .box .dream img{
width: 100%;
padding-bottom: 15px;
border-radius: 5px;
}
PHP code:
<div class="products-wrapper">
<div class="container">
<div class="box">
<div class="dream">
<?php foreach ($products as $product): ?>
<a href="<?=url('index.php?page=product&id=' .
($product['url_slug'] ? $product['url_slug'] : $product['id']))?
>" class="product">
<?php if (!empty($product['img']) &&
file_exists($product['img'])): ?>
<img src="<?=base_url?><?=$product['img']?>" alt="<?
=$product['name']?>">
<?php endif; ?>
<span class="name"><?=$product['name']?></span>
<span class="price">
<?=currency_code?><?=number_format($product['price'],2)?>
<?php if ($product['rrp'] > 0): ?>
<span class="rrp"><?=currency_code?><?
=number_format($product['rrp'],2)?></span>
<?php endif; ?>
</span>
</a>
<?php endforeach; ?>
</div>

How can I center image in mpdf?

I would like to centre image in mpdf (version 6>).
This is my (shortened) html output that I send to mpdf. The displayed class does not help.
<style>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
</style>
<img style="max-height:600px" class="displayed" src="/images/size_original/m_princezna_1.jpg"/>
Add a text-align: center property on a parent HTML element of the image, eg.:
body { text-align: center }
I tried the solution of Finwe but that moved the image to next page. So did a workaround with a combination of solutions here of Ram Guru99 and there :
<table style="width:100%;">
<tr>
<td align="center">
<img src="<?php echo $imagepath ;?>"/>
</td>
</tr>
</table>
You can use below code to center image in the page.
<p style="text-align:center;">
<img src="imageurl.png"/>
</p>

How to make a barlike chart but only with html and css [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a database with lots of records and I have to make a foreach loop in order to get all that data. The problem is that a chart for every data would overload the page. So I need to make a barlike chart using two divs and one div(the blue one) to take percentage of the main one (the grey div) accourding to the value from that data. I did all of that but I don't know how to make the inner div build change it's percentage width according to how close it is from the highest value in my database. This is how I fetch the numbers shown in the right.
<?php echo #$item->{"media_count"}; ?>
I will attach an image so you can see how I need to make it look like.
barlike chart
<table class="table table-bordered">
<tbody style="width: 401px; border: 0;">
<?php foreach ($data->data->data as $key => $item):
if (#$item->{"name"}) {
?>
<tr>
<td>
<?php echo #$item->{"name"}; ?>
</td>
<td>
<div class="outer">
<div class="inner" style="width: 20%;"></div>
</div>
</td>
<td>
<?php echo #$item->{"media_count"}; ?>
</td>
</tr>
<?php }
endforeach ?>
</tbody>
</table>
Is this the sort of layout you are looking for?
.outer, .inner {
height: 20px;
margin-bottom: 5px;
}
.outer {
background-color: gray;
width: 200px;
}
.inner {
background-color: blue;
}
<div class="outer">
<div class="inner" style="width: 20%;"></div>
</div>
<div class="outer">
<div class="inner" style="width: 40%;"></div>
</div>
<div class="outer">
<div class="inner" style="width: 60%;"></div>
</div>
Create a full width div, set the height and width and color it gray. Then, inside that div, create another div with no margin, set the height and color it blue. Set the width of the blue div to the width that you want it.
You could use absolute positioning for the bars inside a relatively positioned div to make the bars follow the outer div.
.outerGraph {
position: relative;
width: 400px;
height: 200px;
background-color: #fff;
}
.value {
position: absolute;
height: 20px;
right: 10px;
}
.bar {
position: absolute;
background-color: blue;
height: 20px;
left: 10px;
}
.bar1 {
top: 10px;
}
.bar2 {
top: 40px;
}
.bar3 {
top: 70px;
}
<div class="outerGraph">
<div class="bar bar1" style="width: 75px;" title="88204"></div>
<div class="value bar1">88204</div>
<div class="bar bar2" style="width: 100px;" title="92784"></div>
<div class="value bar2">92784</div>
<div class="bar bar3" style="width: 200px;" title="100000"></div>
<div class="value bar3">100000</div>
</div>
Use the title attribute on the bars for the hover effect and apply the bar[] class for both bars and their numbers.
Honestly, I cannot think of a reason you shouldnt just use javascript; you should tell us why you want this and post some code of your own

DOMPDF is not generating dynamic image using PHP

I am generating a pdf using DOMPDF but in that the image is not displaying instead it is throwing an error "Image not found".
Here is my code :
require_once "dompdf_config.inc.php";
require_once('html2_pdf_lib/html2pdf.class.php');
include_once('../config.php');
$file = "www/test/mytest.php";
$html=file_get_contents($file);
$dompdf = new DOMPDF();
//$dompdf->load_html($my_html);
$dompdf->load_html_file('https://www.lettertowomen.com/admin/dompdf/www/test/mytest.php?id=111');
$dompdf->render();
$dompdf->stream("sample.pdf");
mytest.php
<body>
<form action="" method="POST">
<table width="1000" height="1000" style="background-color: #b91781;font-family: 'DejaVuSerif'; color: #ffffff;font-size: 20px;">
<tbody><tr>
<td width="249" valign="middle" align="center">
<div style="height: 595; width: 249; text-align: left;padding-top:140px;">
<img src="<?php echo base_url;?>uploads/<?php echo $result['image'];?>" style="border-radius: 159px;
width: 159px; height:225px;margin:70px auto 0;">
</div>
</td>
<td width="583" valign="middle" align="center">
<div style="height: 188px; width: 448px; text-align: left;">
<span style="display: block;
float: left;">To <span style="font-size: 22px; font-weight: 700; line-height: 34px; position: relative; top: 17px;"><?php echo $result['recipient_name'];?></span>
</span><br><br>
<div style="clear: both; display: inline-block; min-height: 160px; padding: 0px 18px; margin: 28px auto 0px;color: #ffffff">From the day you were born,<br>
I fell in love with you my girl.<br>
And when you bloomed like a rose without a single thorn,<br>
You turned my entire life into a most precious pearl.<br>
Your love and care for me is a beautiful dawn,<br>
That marks the end of darkness left to unfurl.<br><br>
Feeling blessed to have you as my daughter. </div>
<br><br>
<span style="display: block;
float: right;">From<span style="font-size: 22px; font-weight: 700; line-height: 34px; position: relative; top: 18px;"><?php echo $result['sender_name'];?></span>
</span></div>
</td>
</tr>
</tbody></table>
</form>
</body>
</html>
everything is displaying but image is not displayed. I have check already asked question in stackoverflow : dompdf not displaying image generated by PHP file but it is not working in my case
Also I have set DOMPDF_ENABLE_REMOTE = true
Thanks in advance
You can use Base64 image data
$html = '<div>
<p>IMAGE</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABMCAIAAACnG28HAAAABmJLR0QA/wD/AP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1AgeBS42B7vBqgAAEhBJREFUeNrtnd%2BPHEcVhfcfBoknxAOIh0g88EsIIqKI1UprObYVe23FwQmskO0EYSskkCgkEo5MCMgoGBABhBDkIXzV3%2Byh6Onu6ZnZ2Zm1u1Qa9fb0VFfdOvfcW7du9%2B59NpWpbKDsTSKYygSsqUzAmsoErKlMZQLWVDZeHj3%2B67vvf/DSjZcODy/%2B9N5bH374O85MwJrKWpACT/vPfe%2B5Z5/97re/8cxXv/L1rz3DwcEPngdhS8FrAtZUZgWWuvHiJcBkBVugivrlL30RbB0eHLx5784ErKksUWCj6zd/DHqAEZD6wuc/x8GNo6uvvnLLPwGZZnEC1lSWsH1CSnKyiq3LV657Ust45dLFCVhTGVXACoiJOyWe8LHEmSdfu3NbK7krphBtgDzp0zR/uynSt3/xJl65AKLKVaDq4YN3WQny%2Bdrxy5cv7MNb1KXs4AaBRc/UhqX4cyrDnhCOjjhgptfHKI3IVVR569Wb1/78x0f1ZWCL88BrKbraFLAgT/CkNkzAOi2uCqqs6/AWremtp7Log8D%2B/emnrSvhLSC1LKo2AixFoD8ItQIv2GtCxvp0VTvXiHcdqbLcC6RwzJkjUTUPLI1Pi8a2Ayw6gaMXKbBqBfUTMtYsPzq%2BG08IF3sdYIFRHCmNIKjieAVC2gKwGLBeocCi6whlQsb6RkBPKLGAldUV10qMGlXHi9pEn08fWFAUfhXunr0HYRDYClw6lRpYiLQ2hQh22WVaC6OGFZisDU3N6QMLDaC7ki0uIeZ8ijisDyzE6GIo2GKFtEJT%2BOz8lnZ0rTbnpZw%2BsDDYAAvG0n%2BffKz1S4lPHl3Vu8AOruy8S1dx/7Ekm%2BvzBhjrzu2oFxXSegrtIFNo8slptebGi8DSxwJYnYu44RWAnKd3hSt8noDFgI3YylhQ7kYHsGvUgutDRbtgbkTBGfVqHe0CWDAWKiosXBsuuySiJ86IaTBM0EYVfm8Twi2kdfOaw8DZWs0bOHcFGDHZKBKONkNGnUAYxyCM84hFyawWJsAIACwhlbSWpRKkErsCVTS1ocXgqQELYSFBPiMvIEXFfkvd5og9DVwFaJgwgcUB3gxjRxRMP9gqJw8vMrsYtWUTMrkeaBp5j/PO8XjKYXYuX7lOf6iJiO4osPQhkKYsTeVPrD49dksnOWJPPGMxcGadITNnVNDDkJMj4CauAikr5cOLLM24YAy83B%2BkmsHilk4ChOPJL0FRezhgB51WWrZ6Jp/1ZacMLG9MR8ETyocmISM6ypgRKF3hJFUfa6nxOxJNhgdb9LuXWqww8abzFhAcHMBS2kGEAHPzybclntdooJeBswHOkKLkmGRyBlL672XP%2BJVb4912usHd458AbmuSF6ia8mxH6iLzSTf4oV2iemD/6Wrn/O6toJ2aOW42k2YjShMZEFlR2ZvXSip%2B42xyfgxEVPE4Afyc1pbNs14fUnT14YN3A%2B5RJubCPl1ljvkEOoh7ngw4w/lco6D6RqdyImQFIra0X5wxpZPKwch4AQ26Tk%2BSTNDZqn3n/cpbJ0Ir9eqxzQ95OWDRxYLxkxVftgXMkPFYgDsGBIFAF4JDolYvNRY2qM%2B7vp1a2AEukGPMduKTP8cAy0cP6HCBQoOqgYsLtnBAGzeLWl9cBw6iVCYg6E4IMs4HWMhqpHAYSCDVh5sxNZAKn4FsRsQ6YHVgaafqXAvgRaOCLGk9iQ4HeXDmwhminYAy9IsetKS/Ylzt%2BGUmfrgPBggcnQZoTGobfXOMdBgRj4kDF5f0xUsynG6WOQUCywi7Bitg0k%2BP255pljMWylbrNkBFnYyV9UFCskJKh0fLiCIxlr4O7I20EfRP60brrf1wBCq8vHEQrX5wfnjxwvSE8OpURj3NdRx/WgYfwEUPuk8E6gw3MrPbboxZc%2Bity1gjyYMuCSyxVQMr6Ubqlaprl2orlulX2n3oT%2BxjmH4SFcs%2BT3ysaHgsieRE/0NRAzO7N9Ka6HUiRK1bJ%2Bu4qVlvaTEA/hy4vaE/fbUAK7lc8lbfnA0YOL9i8kLdzGIf%2Bem0mk4pT4iVYcZKvNHJGOkL0gfDEGipZldUgQOjCXmmTzAhVfQWAcZbiGAV1HwnvUWfI1VvCgliJOyQuZ0ROHBDhTtoiurBsvtyeyPpKls0A7k76mISHR0DEhzYeWC%2BXf3q9TMeBpDgqiOHctTs1rwCBaQwj1o1lftGv3XXOkPVZpGrM67gCsM3JC%2Bj9PWc66P3/HykuPWf4u%2B7LcNYolc6UjTeyhLWSuq81wZrHlj0vH7YZp6iTGwPdBC4Se6nG4jfGxWaO7H6w8sQembcIT4BUkBMfTYIgSrEJFwLIG1riQ438TANTQ0soVPWI4cXW0B3kW/QSAIID80nSZs6xmQbfNLvKUGBJm7E%2Bb6eM1K9n9Dh2AX10VUDyPGxuIU%2BUFZCfQnmDM2u1gvDeXut6aj99NrpLl7Bhf0zSAtYzFiJrTGRCy9m%2BhlqGMsVYqezopSpSopZj8YgVnEgjZkqGF%2BEmYhj28pTM28JROpdImLuwidnuFErJmlwAQCpNgafjAWI2oGlg3ZwZqxHeNAWqJfGaZYBIlVm1ycaYvcl74GbcnHNQ/M7hsgQgegDBHy6xdK/wD2D2M3eMF0Z%2BdXej0lgldjVmFnc%2BcJ%2BJ7CQiHbdAbccqZJ700TLbIc%2BIDKBRZc8qRaGROP8JhjGDHEXLqDyFcdxlrkdf7oE0wjSfon33LwmNAV93xzbtxmLH10dE84w5KPCcGujMHw6Rs3TcNRUz8Gn/5KhAExb14BXuuQ1RmWZAsMis0SmTWbLjAKWCyUty8g9y%2BL6Nb/SXTDKPG8p9FXjqM5fYOK8sFPiwUSdsl2LyTBB%2BEb3qzAWNq4Ji3ClJpW7a%2B9KmKBZOkiW5mX4fJGbfX3%2BuxbfaOcYYKlsVCOfCTQUvT04CLWDieFMGDPfW4v/vvCNN9KdUM7zHL8FYM3oCt1F40cn67nPkzBptjJi5lrgKM9Ddpn8YlKPX3YdpDjyGEnCE9ISkhVAQiE7/16vz6TLrGlzf9OMA7uXuxsf575uJIubedAYbRf0C/dVwlXJpzXBQUPM%2BcT/Mt8D2DL/s14YdmYlMZCEA9x%2BVoddIpzN1u3egGuFFAqRsvgah3F3LeQS5WgkpvafamA5VC7rbM0ncd3ZqJdIkpCkqF4ar6LGC6bb3ggACQK7YdTbQRkkaw2Nm2o15C1JrtUx2oz2c%2BVAVMLN6YQP1KJoiLLStVqouuq5tJegA8clTD2IbLfgEhJDOGeTHrc3HCPWYI3xrspyrPFD9cQ17fEW494qU9lCJ4wr%2B1ZeXIaO8ll7x3r9%2BkbaIykhe5dBYRaYTqr%2BU1ntN6gquwJzm/wGO0r/T%2BLjncAKgnXd%2BhxtWVkfDgRrlAWWK2i9BaNHC%2BOIrhaTOaLrSUUaA6sH7b6rb0e9ZWDp9srhC7tiKpIKoVK6wgqw9B7qELPIkDY6H5XkJ1HomhXcUpXJZslPjc8emqxVX7eJani9cFvjHrlQ6iQJJs98Ms1Wa6u4LLuaZW/SBFrus8sCjY6m1uWLNSrqKwjUDUfR56gZ8TGU6Ps53EuVvdSBAdbUjMSdXee5sdMBFjSQVdsAY%2BmySFEGymfT2Tg38YSCnpnvfLKtUczcyc5Gi64Uh3vSLaGL2gA3gdAS15kzbcWkNvgwwm7OxfyVLRNsCqjOQEhLdPpkW%2BJkIs8tFLXFITt2ac90j1o/pcawKVci8M5sC8677SEEdf%2BL2jdRXBclA7FcA3XZh90ysLTojFzvpLZl2Ycya0Kzkuf/Y1nqxUhc7HjfmhsbT4ZgeEtcZs9h3lYmcFrvznaaNt%2BaYgJnsppokzN9gWaBZbw0mTBJLEYstY8l6MNhMTeJoRfao7Vml62tkM2TATOfr0GYgdmkScnrehQ2aMTcZY2LviTh9FlDlbAG1jZNoeKT0rPg15thwFKFU5X95pbgijfQCE49Q76xhrNlQWPLdD%2BNMKn3Sjy8zQXzInNhmFBWNs46sWJ%2BFX3OLiRtDguFn8y8sWaHx/18408mQWjCXM0Z6w%2BHJS1OMvaNGvMkobdk1fKaEpP9YF0ILZ0%2BiUEfV3yCVehnd6jTTy2W/YT7Hf42gaWW64zXxF7vtCdVpnMDUV9EWjLiYAacjCWN%2B21B6ouXCi9euY4IkpI6sHuvnxGuEit99lr%2By17nsGWv49euSSWtbPjotImA2YMJTQA5cTW9LgMcbn32EYlEWGxis1Zl4EJZUIokCYnPFsVKq2aBa4s7TaGzEGLTnm7Zx8quZ5IY67fehPMHNp7UlfrJVYGl7chDrUJqFoY9ySM1ublvIS1jOZ3GlwcCImptYuUjQycMKhPPb%2BlPFm609r9XvjZ%2BNOThOlHJFG%2B9mfWBbV3xBJhMBcvuoV6dPCSk%2Bp6oCefp2psU2eItlcoFPkNQu7a8KtQqaQVmWUcnK/zZY/%2BL3h0oM%2Bmc%2BvM6yCn/S/KumRNechEwMH4DV/bBXaPhnXlR4n7%2ByD18hu/mvxsv9DZzxu2yVhBJySQ2rDCSEvQWXCrWXp0UyHmaNW1maJHRtFCEeXQVbLUuFlh5Rmj7prAm0iAgzwUMjLaTWuoHDF0AhrRUUF14HVWnanjwyqt4xE2Ec2RnVkgL6Uxniyl0R8V8qQS7l21/9lLGhqv09JMOZcvDChMfrk9t3PBOFslOAKveHzBfZ1nZmTCZJz2SgWToUt/CBZGU5kpnx1/URs/jC%2BPIn8rTRAh2IYwG%2BtM3NbNNqsbZjU%2B8ibdhrQKsNeXlO0KCmzqyYMRSnVstTXGLwNLp3PG3f81sTpPEoU%2B88mtqdgtYWWGZI%2BourJ6m/6Tls3NYDN9nM3TH30yBxuq2J8D2JDBW7cW7gNLY%2ByjiOX0LjY5jWf1duT7m2bKt9zbeyCzi%2BGQwVgxicjtdBJ3Tl2aVvaYmJd8IPmSw46%2BVE1h5%2Bqi8FXbriX6nji3reX%2BJcr1d2PmczA7yax58op7NC9Knf3myuo8lsOY3j7dV/vaX33eqgYHuAGv7Oe%2BbLv9pyjmC1L/%2B8fizk3wBfWEfpdTN%2BvV7b3gZB1QvbhXO//bhr6he/M5br99//ZiDV2/d%2BuFLR9Y7xzdblZNewDHXW/ktP/T47u2fcMy3nrHlAEsfK9aQP89A7Htno0ZKWYkzZgSBmC6/UNwuKsdKCol//OjhhvQ4srYznPcr7uhNc96Tdphf%2BUOmzQ7X%2BfjuRzF53/nWN1t1//nvOzqrZ6jzV/pV5/lTqebz5Mk8jsWroIxknJ3UWv9XARaT6nTWRNqpbZ18GwWKxuSgFmuT13dQiy9S7pQp1zuLN66%2BoAjqe1Gjzd6OUXBlKj8cnsXWtxx7uzETbHCIAZl6kMwCSOXo2g3asTJeqs36Z0TBZV55fHzbevfuz/ikEQ6ohRffef/%2BvfvUN37%2BNn%2B%2B994DD7wsLdgsB/xJB%2BoGvSxvXM7CsESk9/9vUjpHna9ovJatxCnXRlfn6WCvT3y06KS2MMTJ8WrnADJmRqt0WgWp/eajj5WmIuYnSyklN6qPlbhC8e7MEI1zd9oXAV7g9NfVn1jpCT9Jn%2Bkk1ciccSwfIm2FsmLic/DJ3/9JzQUcO941WYFf1c32LTWSXG%2B4QR/rwQcfRfKP//TJoz885jjIZuCZMpCEKLQwHMi%2BfVUuoBZgpRO0wgTQHE0MTyRTwj1UC7tIz2yEA8/U8lrTqNMglQkGHAqCT44Ljf/yHaXDBc5WLeu%2B%2B7bmtXVmeLZkLJPJ9F12/JWFyZrMI0wLF%2Ba13BR%2BJhdBCUFORlelTzVWftlbKHd/Xxjr3n0xvlD0T3zx8cPkbox/GHpry9iT51zM7dloEFHkTeGG1UNZeQ7Ct07sbG/zTpe8nOgMgroTsFYpeSWOby7Z8ZCvGbnZK5yAtdPAmqV9jk5N22LxscRkZpfHIauHhH0v5gSsXSlmUJ2L7Skjunn/Vt447MtRzKKegDWVVTzCkpJ1eDGvfjRb32f4NmTKJ2A9FcWnhvKWnrwrS4RtYh99AtZTUcqLSU8eAa/fpy17TYw1ldWtoW5W3ouc9yX3vZRlAtZUFhcfi8q/PMlrz/2/hxOwprKWNfTB2sTfh9%2BBPQFrKmOtoU/x5%2BVQG32qYgLW00Va/vcb/z3nRu81AevpKr5tYPi9EhOwprK7ZQLWVCZgTeX8lP8CuDenorrKqfIAAAAASUVORK5CYII%3D">
</div>':
require_once('dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF ();
$dompdf->load_html ($html);
$dompdf->render ();
$dompdf->stream ("Test.pdf", array ("Attachment" => false));
Get the image from php in base64:
//getIMG.php?data=1&id=123
if ($data == 1) {
echo "data:image/".$adj->type.";base64,"
.str_replace ("\n", "", base64_encode ($adj->imageBinary));
}
For showing the image, you have to go to your dompdf source file like
..dompdf\src\Image\Cache.php
In the Cache.php file, you will search .... and make chrootValid true.. by default it will be false.
$chrootValid = true;
save it and try now...
Hope it will work

Problems with CSS and include function in PHP

I am trying to develop a website in php. On my main page I use include function (in php) to include other files in it. But when load the main page the CSS in the other files get all screwed up. It is showing as if there is no CSS at all so everything is on top of each other. When I load the files separately everything works perfectly fine.
So in the index.php file I have
//code
include 'toolbar.php';
Then in toolbar.php I have
div.fileinputs
{
position: relative;
}
div.fakefile
{
position: absolute;
top:0px;
left:0px;
z-index: 10;
}
.text_computer
{
position: absolute;
top:80px;
left:20px;
z-index: 20;
text-align:center
}
input.file
{
cursor: pointer;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 30;
width:317;
height:202;
}
.text_upload
{
position: absolute;
top:6px;
left:80px;
z-index: 20;
text-align:center
}
input.submit
{
cursor: pointer;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 30;
width:330;
height:50;
}
//code
<div class="fileinputs">
<input type="file" class="file" name='image'/>
<div class="fakefile">
<img src='red_frame.png' width='330'>
</div>
<div class="text_computer">
<a style='font-family:Arial;color:white;'><font size='6'>Choose a photo from<br> your Computer</font></a>
</div>
</div>
<div class="des_box">
<textarea name='description' cols='38' rows='4' placeholder='Enter a description here...' maxlength='500'></textarea><br>
</div>
<br>
<div class="fileinputs">
<input type="submit" class="submit" value='Upload'>
<div class="fakefile">
<img src='red_frame.png' width='330' height='50'>
</div>
<div class="text_upload">
<a style='font-family:Arial;color:white;'><font size='6'>UPLOAD!!!!</font></a>
</div>
</div>
This isn't all of the code but this is the part that is piling on top of each other when I include it in index.php
When I just run toolbar.php everything is spaced out fine.
Is there a way to fix this?
Could there be some other sort of problem that is causing this?
Wait never mind i found this <!DOCTYPE html> at the top of my index.php and removed it to see if it would fix the problem and for some reason it did. I have no idea why that fixed it, but now everything works.
I suggest not to use 'include', please try in the following way-
<?php
.
.
.
?>
<link href="../bootstrap/css/bootstrap-timepicker.min.css" rel="stylesheet"
type="text/css"/>
<?php
.
.
.
?>
Just include your CSS file through PHP. Its legitimate !
<?php include ('yourheader.php'); ?>
<style>
<?php include ('main.css'); ?>
</style>
You can use #import also to load the css styles.
#import url('/css/styles.css');
#import url('/css/main.css');
#import url('/css/color.css');
/* All three CSS files above will be loaded from
this single document. */

Categories