I use html2pdf to generate pdf with table data but I have some issue that I can't deal with. No matter how I set margins i always have some additional blank page at the end of pdf.
This is how looks like my pdf template :
<body>
<div class="page">
<div class="inner-page">
<div class="dealers-table">
<div class="head">
<div class="it">Lp.</div>
<div class="name">Name</div>
<div class="street">street</div>
<div class="post-code">Post Code</div>
<div class="city">City</div>
<div class="phone">Phone</div>
<div class="services">Services</div>
</div>
<div class="body">
<div>
<div class="it"></div>
<div class="name"></div>
<div class="street"></div>
<div class="post-code"></div>
<div class="city"></div>
<div class="phone"></div>
<div class="services"> /</div>
</div>
</div>
</div>
</div>
</div>
And css:
.page {
width: 210mm;
height: 280mm;
margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.inner-page {
padding: 5mm 10mm;
}
.dealers-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 6.5pt;
line-height: 1;
}
I don't set any margins in options of my Converter.
When I set page width less than 280px table from second page starts at the end of first page and additional blank page doesn't appear, in other situations there is always useless blank page.
How can I fix it?
EDIT 1
There is some code where I generate pdf on server side:
public function generatePdf() {
$autoDealers = $this->autoDealersOrServices(0);
(some function where i fetch array of dealers from my DB)
$autoDealers = view('pdf.template', [
'autoDealers' => $autoDealers
])->render();
$input = new StringInput();
$input->setHtml($view);
$converter = new Converter($input, new FileOutput());
$converter->setOption('landscape', false);
$converter->setOptions([
'printBackground' => true
]);
$output = $converter->convert();
$output->store('pdf/auto/dealers.pdf');
}
SyntaxEditor Code Snippet
"--encoding UTF-8 --page-size A4 --margin-left 10 --margin-right 10 --margin-top 20 --margin-bottom 0"
Related
I'm trying to display the Instagram feed on a website, but the column breakpoint is not working.
When in a small device all the columns on the other sections stacks like they are supposed to, but for this part the feed part it is no stacking. They still side by side even in a small screen device.
I didn't do any customization for the bootstrap.
The custom css for the images is listed below.
I'm suspecting that my css is interfering with it somehow, but i didn't find a solution. Can you help me?
<div class="container">
<div class="row" id="instagram-feed">
{loop="$feed"}
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="{$value.permalink}"
target="_blank"
style="background-image: url('{$value.media_url}')"
></a>
</div>
{/loop}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 gallery-link" >
<p>
xpto
<a
href="https://www.instagram.com/xpto/"
target="_blank"
rel="noopener noreferrer"
>instagram</a
>
</p>
</div>
</div>
</div>
i'm using rain/tpl to loop the values.
Rendered result:
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="https://www.instagram.com/p/Ce3K0vtqwWg/"
target="_blank"
rel="noopener"
style="
background-image: url('https://scontent-frx5-1.cdninstagram.com/v/t51.2885-15/288042510_360927436108874_1443195410220397807_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=8ae9d6&_nc_ohc=BcBzX46rui8AX9LhNfW&_nc_ht=scontent-frx5-1.cdninstagram.com&edm=ANQ71j8EAAAA&oh=00_AT-UQWOTJQXMvRivbpb7IAutNaT6D2_1ws1WdzhSNMARWA&oe=62B4FE5D');"
>
</a>
</div>
The css i added for this part:
.instagram-image a:before {
content: "";
display: flex;
font-family: "Font Awesome 5 Brands";
font-size: 50px;
color: var(--primary);
background-color: #73a2a9;
opacity: 0;
text-align: center;
transition: all 0.5s;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.instagram-image a:hover:before {
opacity: 0.5;
}
#instagram-feed {
width: 100%;
float: left;
display: flex;
justify-content: space-around;
}
am working on a codeigniter website and currently trying to achieve a layout like this where i have equal heights for all images in row but different widths.
My images are stored in a MYSQL database with url paths pointing to the directory where they are located. I have also stored their heights and widths (the height and widths are stored in pixels).
Here is the sql for fetching the contents in PhotoController
$data['data'] = $this->model
->select('photo_path, photo_height, photo_width')
->get()
->getResultArray();
Then in Home view, here is what i have so far. (using bootstrap 4 for styling)
<div class="container">
<div class="row">
<?php foreach ($data as $row) : ?>
<div class="col-md-4 col-lg-6">
<img src="<?= base_url($row['photo_path']); ?>" class="img-lazy img-fluid">
</div>
<?php endforeach; ?>
</div>
</div>
Am stuck on what to do next here.
html
<div class="masonry-with-columns-2">
<?foreach ($data as $row){?>
<div>
img here
</div>
<?}?>
</div>
scss
// Within style tags in your html file
body {
margin: 0;
padding: 1rem;
}
// SCSS
// Masonry layout horizontal
.masonry-with-columns-2 {
display: flex;
flex-wrap: wrap;
div {
height: 150px;
line-height: 150px;
background: #9B1B30;
color: white;
margin: 0 1rem 1rem 0;
text-align: center;
font-weight: 900;
font-size: 2rem;
flex: 1 0 auto;
}
#for $i from 1 through 36 {
div:nth-child(#{$i}) {
$h: (random(400) + 70) + px;
width: $h;
}
}
}
Source https://mdbootstrap.com/docs/angular/layout/masonry/
This question already has answers here:
How do I center floated elements?
(12 answers)
Advantages of using display:inline-block vs float:left in CSS
(5 answers)
Closed 4 years ago.
So i wrote this code to be responsive and I wanted each picture horizontally and in smaller screens, it would go vertical. My only issue is that on larger screens I want the imgs to be centered but no code seems to work. I tried some solutions from Stack users but I can only get it to go either completely left or right but not centered.
Thank you for helping.
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
max-width: 200px;
display: block;
margin: 15px auto;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
</div>
It is easiest to use a flexbox. It is responsive by nature and keeps the document flow intact.
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
width: 33.33%;
padding: 5px;
max-width: 200px;
display: block;
margin: 15px auto;
}
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
<h2>Responsive "Side-by-Side" Images</h2>
<p>How to create side-by-side images with the CSS float property. On screens that are 500px wide or less, the images will stack on top of each other instead of next to each other:</p>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/targetoffers.png" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/starbucksoffer.png" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="http://zoeaa.com/public/admin/mysteryoffers.jpg" alt="Forest" style="width:100%">
</div>
</div>
This is my very first thread, I'll try to be as precise as possible.
I'm very new to working with php, and my current project is therefor quite a challenge.
I have 2 products, I would like to be able to, through ACF, to exchange both the default BG image and the hover image.
ATM I can exchange the hover, but its visible at all time.
If I add an image through the wysiwyg editor, it wont set as bg image, but on top of the content.
Heres what I have:
These are the two products. The left one has the hover bg img, shown at all time. The right one doesnt have any for now
Here you can see the ACF on the relevant page
Here is what it looks like, if I add an image through the wysiwyg editor (the hover img shows in the background)
Here is my css, for the products
Here what the code looks like:
<?php
/**
* Variables
*/
$introductiontitle = get_sub_field('introduction_title');
$introductionsubtitle = get_sub_field('introduction_subtitle');
$introductionsubtitle2 = get_sub_field('introduction_subtitle_2');
$hover_image1 = get_sub_field('hover_element_1_background');
$hover_image2 = get_sub_field('hover_element_2_background');
<!-- Introduction
-------------------------------------------------------------->
<div class="container-fluid pt-5 pb-8">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-3">
<h1 class="font-weight-bold mb-3">
<?php echo $introductiontitle; ?>
</h1>
<p>
<?php echo $introductionsubtitle; ?>
</p>
<p>
<?php echo $introductionsubtitle2; ?>
</p>
</div>
<div class="col-12 col-md-6">
<div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
<?php if ($hover_image1) { ?>
style="background-image: url(<?php echo $hover_image1 ?>"
<?php } ?>
>
<?php the_sub_field('hover_element_1'); ?>
</div>
</div>
<div class="col-12 col-md-6">
<div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
<?php if ($hover_image2) { ?>
style="background-image: url(<?php echo $hover_image2 ?>"
<?php } ?>
>
<?php the_sub_field('hover_element_2'); ?>
</div>
</div>
</div>
</div>
I hope this all made sense!? Otherwise just let me know, and I'll explain it better.
Thanks in advance
I would've posted a comment for clarification but don't have enough points for that yet so decided I'd post an answer as it might be what you're trying to achieve.
Using a combination of layered elements and opacity you should be able to achieve an effect where the background image changes.
Here's an example using solid colours, but they can easily be changed to other elements (e.g. your custom background images, and images):
https://codepen.io/epsilon42/pen/NBNVad
HTML:
<div class="product" style="background: #ccc;"><!-- change inline style to to ACF initial background-image -->
<div class="hover-background" style="background: #666;"><!-- change inline style to to ACF hover background-image --></div>
<div class="copy">
<h2>test</h2>
<p>lorem ipsum lorem ipsum</p>
<div class="icon">
<div class="initial-icon" style="background: #f00;"><!-- change this div to initial <img> --></div>
<div class="hover-icon" style="background: #b4d455;"><!-- change this div to hover <img> --></div>
</div>
</div>
</div>
CSS:
.product {
width: 300px;
height: 300px;
position: relative;
}
.product .hover-background,
.product .copy {
width: 100%;
height: 100%;
position: absolute;
}
.product .hover-background {
opacity: 0;
transition: 0.2s all ease-in;
}
.product .copy {
text-align: center;
}
.product .copy .icon {
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
}
.product .copy .icon .initial-icon,
.product .copy .icon .hover-icon {
width: 100%;
height: 100%;
position: absolute;
}
.product .copy .icon .hover-icon {
opacity: 0;
transition: 0.2s all ease-in;
}
.product:hover .hover-background {
opacity: 1;
}
.product:hover .copy .icon .hover-icon {
opacity: 1;
}
You will need to adjust the CSS a bit to suit your situation.
Here is my code.
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class="box">
<div class="panel">
<div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
<div class="overlay">
<div class="content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
Having a problem with the images are not displaying the way I expected to, every time I insert or add a new image, it always go to the next row.
This is what I want for the layout.
But instead it keeps on displaying on the next row every time I add new image.
I also tried put it in a row class, but nothing happens.
Here is my CSS code.
.box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.panel {
height: 230px;
min-width: 250px;
margin: 10px;
flex: 1 1 30%;
}
.image {
background-size: cover;
height: 230px;
}
.overlay {
position: relative;
background-color: rgba(15, 10, 36, 0.5);
height: 230px;
}
.content {
text-align: center;
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Solved this by moving the div container outside the php code.
Check the code below.
<div class="box"> <!-- This div -->
<?php
$q = $db->query("SELECT * FROM images WHERE user_id = $id");
while ($result = $q->fetch_assoc()):
?>
<div class="panel">
<div class="image" style="background-image: url(uploads/<?= $result['image'] ?>)">
<div class="overlay">
<div class="content">
<strong>Title</strong>
<p>Some text</p>
</div>
</div>
</div>
</div>
<?php
endwhile;
?>
</div> <!-- and this div -->
I've tried different approach but it did not work with me,
I hope this can help other people who's having the same problem as mine. Just put the div container outside the iteration.