I am new to Yii2. What I am working now is generating PDF with some widget like html2pdf and mpdf. I have my HTML and CSS code very well displayed in IE (client's requirement), shown as below picture.
HTML and CSS displayed in IE Browser
When I generate the PDF file, it was a mess.
Generated PDF File using html2pdf
I was assigning full HTML content into a variable like this in my controller.
public function actionReport()
{
$username = Yii::$app->user->identity->username;
$html = <<<HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#bop_event{
border:outset thin black;
padding: 1% 1% 1% 1%;
width: 18cm;
height: 29.7cm;
}
#logo{
//border:outset thin black;
display: block;
}
.logo,.hidden_logo{
display:inline-block;
width:32%;
padding:1% 1% 1% 1%;
// border: outset thin red;
}
.hidden_logo{
visibility:hidden;
}
#bop_title{
border:outset thin black;
padding:5px 5px 5px 5px;
text-align:center;
margin-bottom:1%;
}
#bop_desc{
border:outset thin black;
padding:5px 5px 5px 5px;
font-size:1.2em;
margin-bottom:3%;
}
.subcontent_area{
margin-bottom:3%;
}
.subcontent_title,#signature{
font-size:1.2em;
font-weight:bold;
}
.field{
display: inline-block;
font-size:1em;
width:30%;
border:outset thin black;
margin-bottom:1%;
//margin-right:1%;
}
.field_title{
font-weight:bold;
border-bottom: outset thin;
padding-left:2%;
}
.field_data{
padding-left:2%;
}
.hidden_field{
visibility:hidden;
display:inline-block;
width:30%;
}
#place_sign{
text-align:center;
/*width:31%;*/
}
.sign,.hidden_sign{
display:inline-block;
/*width:28%;*/
text-align:center;
// border: outset thin red;
}
.person{
/*margin-top:27%;*/
width:relative;
// border: outset thin black;
}
.hidden_sign{
visibility:hidden;
}
</style>
</head>
<body>
<div id="bop_event">
<div id="logo">
<div class="logo" >
<img src="images\rpt_axa_logo_left_bg.png" align="left" />
</div>
<div class="hidden_logo" ></div>
<div class="logo" >
<img src="images\rpt_mandiri_axa_logo_right_bg.png" align="right" />
</div>
</div>
<div id="bop_title">
<h1><b>BOP Event Proposal</b></h1>
</div>
<div id="bop_desc">
Dengan ini saya yang bertanda tangan di bawah ini mengajukan permohonan untuk penggantian biaya BOP yang akan diselenggarakan dengan detil sebagai berikut.
</div>
<div id="konten">
<div id="event_budget" class='subcontent_area'>
<div class="subcontent_title">
Detil Event dan Budget
</div>
<div class="field">
<div class="field_title">Tanggal BOP</div>
<div class="field_data">31 Maret 2017</div>
</div>
<div class="field">
<div class="field_title">Jenis BOP</div>
<div class="field_data">Reguler BOP</div>
</div>
<div class="field">
<div class="field_title">Total Biaya</div>
<div class="field_data">Rp3.000.000,-</div>
</div>
<div class="field">
<div class="field_title">Kota</div>
<div class="field_data">Jakarta</div>
</div>
<!--<div class="field">
<div class="field_title">Tempat Pelaksanaan</div>
<div class="field_data">AXA Tower</div>
</div>-->
</div>
<div id="speaker_pic" class='subcontent_area'>
<div class="subcontent_title">
Pembicara dan PIC
</div>
<div class="field">
<div class="field_title">Pembicara</div>
<div class="field_data">Eksternal</div>
</div>
<div class="field">
<div class="field_title">Nama Pembicara</div>
<div class="field_data">Indra Gunawan</div>
</div>
<div class="field">
<div class="field_title">Keterangan</div>
<div class="field_data">tess</div>
</div>
<div class="field">
<div class="field_title">PIC Management</div>
<div class="field_data">Rainaldy</div>
</div>
<div class="field">
<div class="field_title">No HP PIC</div>
<div class="field_data">08112223456</div>
</div>
<div class="hidden_field">
<div class="field_title">-</div>
<div class="field_data">-</div>
</div>
<div class="field">
<div class="field_title">PIC Agency</div>
<div class="field_data">Imam Hidayat</div>
</div>
<div class="field">
<div class="field_title">No HP PIC</div>
<div class="field_data">08112223456</div>
</div>
</div>
<div id="comitment_plan" class='subcontent_area'>
<div class="subcontent_title">
Komitment/Plan
</div>
<div class="field">
<div class="field_title">Total Peserta BOP</div>
<div class="field_data">50</div>
</div>
<div class="field">
<div class="field_title">Total Agent Code</div>
<div class="field_data">30</div>
</div>
<div class="field">
<div class="field_title">Total NR</div>
<div class="field_data">25</div>
</div>
</div>
</div>
<div id="signature">
<div id="place_sign">Kota, <?php date_default_timezone_set('Asia/Jakarta'); echo date('d M Y');?>
</div>
<div id="sign_area">
<div class="sign">
<div>Proposed By</div>
<div class="person">$username</div>
</div>
<div class="hidden_sign"></div>
<div class="sign">
<div>Approved By</div>
<div class="person">()</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML;
return Yii::$app->html2pdf->convert($html)->saveAs('output.pdf');
}
.field is the class which contains the box.
Anyone has ever got this issue?
Thanks for your help.
Related
I have this shape and want to approximate the distance between each column, meaning I want to approximate the distance between each blue piece, how can I do that_?
Card.vue:
<template>
<div>
<div class="card d-inline-flex" style="width: 40rem; height:7rem; ">
<div class="row background">
<div class="col">
<div class="p-5 bg-info rounded-left ">Flex item 1</div>
</div>
<div class="col">
<div class="p-5 bg-info rounded-0 ">Flex item 1</div>
</div>
<div class="col">
<div class="p-5 bg-info rounded-right">Flex item 1</div>
</div>
</div>
</div>
</div>
</template>
<script></script>
<style>
.background {
background-color: #dcdcdc;
}
.d {
margin-left: 4px;
}
</style>
The space is there because bootstrap has a padding-left and padding-right of 15px for the class col pre-defined. So to get the space that you want, just add a custom class to your div and mess around with padding-left and padding-right. But don't forget to use "!important" as you want to override the style defined by Bootstrap. Here is an Example :-
<template>
<div>
<div class="card d-inline-flex" style="width: 40rem; height:7rem; ">
<div class="row background">
<div class="col a">
<div class="p-5 bg-info rounded-left ">Flex item 1</div>
</div>
<div class="col a">
<div class="p-5 bg-info rounded-0 ">Flex item 1</div>
</div>
<div class="col a">
<div class="p-5 bg-info rounded-right">Flex item 1</div>
</div>
</div>
</div>
</div>
</template>
<script></script>
<style>
.background {
background-color: #dcdcdc;
}
.d {
margin-left: 4px;
}
.a {
padding-left:0 !important!;
padding-right:0 !important!;
}
</style>
Here i used a custom class called a, just mess around with padding-left to get the space you need.
Created a swipe with thumbs. When I click on thumbs, it scrolls to the right with incomprehensible logic. I cannot understand what this may be connected with, I am trying to solve this problem for the second day, nothing comes out. Is it possible to somehow disable this option so that you can remove this scroll when clicked?
const productThumbs = new Swiper(".swiper-thumbs", {
spaceBetween: 30,
loop: true,
slidesPerView: 6,
loopedSlides: 7,
});
const productCarousel = new Swiper(".swiper-content", {
effect: 'fade',
fadeEffect: {
crossFade: true
},
touchRatio: 0,
thumbs: {
swiper: productThumbs,
}
});
.swiper-slide{
background: gray;
}
.swiper-thumbs .swiper-slide{
height: 300px;
}
.swiper-content{
margin-top: 30px;
}
.swiper-thumbs .swiper-slide{
display: flex;
flex-direction: column;
}
.swiper-content .swiper-slide{
height: 250px;
background: black;
color: white;
font-size: 72px;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="slider-title">01</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">02</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">03</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">04</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">05</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">06</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper-content">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
I tried to do this, but I just simply do not understand why this is happening
In the "thumbs" slider, you need to change the value "loop" to "false" or remove the key "loop" from "thumbs" slider.
I have a grid with 11 columns
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
</div>
My problem is that bootstrap works on 12 column grids, therefore the 12th column shows empty. (making the grid look non centered)
I want to center this grid so at the beginning of the grid there will be the space of half a column, and at the end of the grid it will show the other half:
<div class="row">
<div class="col-lg-1/2">1/2 blank</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1/2">1/2 blank</div>
</div>
^ thats an example of how I imagine it will work, but unfortunately we dont have 1/2 columns on boostrap.
You could always create a half-size column to add into a supplemental style sheet (You'll want to make sure you account for all of the styling, though):
.col-lg-half {
width: 4.166666665%;
}
.col-lg-half
{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 1200px) {
.col-lg-half {
float: left;
}
}
Then, what you are wanting should work.
<div class="row">
<div class="col-lg-half">1/2 blank</div>
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-half">1/2 blank</div>
</div>
I've got my stacked progress bars looking nice, with percentage labels on each, but I'm not sure how to solve when a percentage causes the bar to be too small for the label.
Setting a min-width works for non-stacked progress bars, but breaks stacked ones.
How can I fix this without hacking up bootstrap too much?
Example fiddle: http://jsfiddle.net/nimh/kx7hvxyz/
<div class="container-fluid">
<div class="row-fluid">
<div class="panel panel-default max-width">
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 89.74%">
<div class="text-left">+89.74%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10.26%">
<div class="text-right">-10.26%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 10.26%">
<div class="text-left">+10.26%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 89.74%">
<div class="text-right">-89.74%</div>
</div>
</div>
</div>
</div>
</div>
Had a night to think about it and realized i can add a max-width percentage, as well as a min-width percentage, to keep stacked progress bars at least wide enough to show a label on both.
.progress-bar {
min-width: 15%;
max-width: 85%;
}
http://jsfiddle.net/nimh/kx7hvxyz/8/
It's not perfect (may look funny with a 99% and 1%), but will work for showing a label at all times for our needs.
How about playing with the line-height and font-size?
[1]: http://www.bootply.com/Tq7YbaeOX5
/* CSS used here will be applied after bootstrap.css */
.max-width {
max-width: 25em;
}
/* .progress-bar {
min-width: 4em;
} */
.progress-bar {
padding: 4px;
line-height: 12px;
}
.text-Left {
font-size: 12px;
float: left;
}
.text-left, .text-right {
font-size: 7px;
padding-right:5px;
}
.text_Right {
float: right;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="panel panel-default max-width">
<div class="panel-body">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 89.74%">
<div class="text-Left">+89.74%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10.26%">
<div class="text-right">-10.26%</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 10.26%">
<div class="text-left">+10.26%</div>
</div>
<div class="progress-bar progress-bar-danger" style="width: 89.74%">
<div class="text_Right">-89.74%</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have an in img in boostrap and i want it to show in right and to show 4 objects in the left in two rows each one has two objects which is 4 columns from the grid
My HTML
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product first wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro1.jpg" width="600" alt="" class="img-responsive" >
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Energy</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="banner">
<img src="http://placehold.it/300x450">
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
<div class="product second wow zoomInDown "
data-wow-delay="0.3s" data-wow-duration="2s">
<img src="images/hiro2.jpg" width="600" alt="" class="img-responsive">
<h6 class="text-center">it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</h6>
<p>Phyto</p>
</div> <!-- end of product-->
</div> <!-- end of bootstrap columns-->
</div> <!-- end of row-->
MY CSS
.product{ overflow: hidden; margin-bottom: 40px; position: relative; cursor: pointer; float: left;}
.product p {position: absolute; top: 10%; left:200%; color: white;
z-index: 2000; font-size: 20px; opacity:0; transition:all 0.5s;}
.product h6 {position: absolute; top: 40%; left:-200%; color: white;
z-index: 3000; font-size: 20px; opacity:0; transition:all 0.5s ; line-height: 20px;
transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000); }
and this is the result that shows up
http://i.imgur.com/2PhECdx.jpg
I have modified your code to make two columns and the first column is containing two rows with two columns.
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 img-container">
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 img-container">
</div>
</div>
Check this:
http://jsfiddle.net/h68hzfnc/