I have a function to print to PDF in my controller. It receives HTML code of a bar code and send it to _print-tags file.
My controller file:
public function actionPrintTags($barcode)
{
Yii::$app->response->format = 'pdf';
return $this->renderPartial('_print-tags', [
'bar' => $barcode,
]);
}
My _print-tags file:
<body>
<?= $bar . '<br/>' ?>
</body>
But it shows:
If I show it in my view, it looks perfect:
I use https://www.yiiframework.com/extension/yii2-barcode-generator-8-types.
Update: $barcode has the HTML code that create the barcode:
<div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 3px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 3px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 2px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 2px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 4px solid #000000; height: 50px;"></div><div style="float: left; font-size: 0px; background-color: #FFFFFF; height: 50px; width: 1px"></div><div style="float: left; font-size: 0px; width:0; border-left: 1px solid #000000; height: 50px;"></div><div style="clear:both; width: 100%; background-color: #FFFFFF; color: #000000; text-align: center; font-size: 10px; margin-top: 5px;">A</div>
This is probably mPDF limitation. mPDF does not has full support for HTML and CSS features, some things may be rendered differently that in browsers.
The CSS property float is partially supported in mPDF, allowing block elements (p, div etc.) to be placed alongside one another. They can also be used to create “columns” that span more than one page.
Limitations:
Float only works properly if a width is set for the float
If no width is set, the width is set to the maximum available (full width, or less if floats already set)
A block element next to a float has the padding adjusted so that content fits in the remaining width.
Text next to float should wrap correctly, but backgrounds and borders will overlap and/or lie under the floats in a mess
Does not work if Columns are being used.
You cannot change the page margins/orientation etc. in middle of using floats
Float is only supported on block elements (i.e. not SPAN etc.)
https://mpdf.github.io/what-else-can-i-do/floating-blocks.html
You may try to play with this HTML and use some substitutes (like display: inline-block instead of float:left) or set some width for parent container.
But it probably will be simper to switch to library which is able to render barcode as image (picqer/php-barcode-generator for example) - simple PNG should be less problematic for PDF generators.
Related
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed last month.
Below is the HTML and CSS that I have used which is not response. I wanted to know how to make the output responsive. Is there a way to do the same using bootstrap?
.red-hori-line-2 {
border: 1px solid red;
width: 75px;
padding-top: -32px;
margin-top: -32px;
padding-left: 320px;
margin-left: 320px;
}
.red-hori-line-3 {
border: 1px solid red;
width: 75px;
padding-top: -10px;
margin-top: -10px;
padding-right: 320px;
margin-right: 320px;
}
.red-vert-line-1 {
border-left: 2px solid red;
height: 60px;
padding-top: -10px;
margin-top: -10px;
padding-left: 320px;
margin-left: 320px;
}
.red-vert-line-2 {
border-left: 2px solid red;
height: 60px;
padding-top: -60px;
margin-top: -60px;
padding-left: 1246px;
margin-left: 1246px;
}
<div>
<center>
<p class="in-focus">IN FOCUS</p>
</center>
</div>
<hr class="red-hori-line-2" />
<hr class="red-hori-line-3" />
<div class="red-vert-line-1"></div>
<div class="red-vert-line-2"></div>
Your code seems overly complex
How about
fieldset {
border: 1px solid red;
border-bottom: 1px solid white;
height: 5vh;
}
legend {
width: auto;
margin-left: auto;
margin-right: auto;
}
legend span {
padding: 2vw;
font-family: "Helvetica Narrow", "Arial Narrow", Tahoma, Arial, Helvetica, sans-serif;
}
<fieldset>
<legend><span>IN FOCUS</span></legend>
</fieldset>
.score{
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
.score p span{
padding-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I want to move my text down a little bit but it's not working, putting padding in .score just makes it bigger and nothing happens if I put it in .score p span.
Nepotech's answer is correct. An other way is useing line-height for .score:
.score {
font-size: 20px;
text-align: center;
background-color: white;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
line-height: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
Just Use margin-top to p element
Note: I have changed color to blue, for better understanding!
.score{
font-size: 20px;
text-align: center;
background-color: blue;
width: 700px;
height: 200px;
border: 1px solid white;
border-radius: 0px 0px 10px 10px;
display: block;
margin: 0 auto;
}
p{
margin-top: 100px;
}
<div class="score">
<p>bb<span id="correctAns">jkjh </span></p>
</div>
I've the below HTML Code in my document.
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle"> - Bot
</div>
<hr class="hr-clas">
<div class="chat-box-right" id="chatbox">Hi</div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle">
</div>
<div class="chat-box-left">Hello</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle">- Bot
</div>
</div>
And my CSS is as below.
.hr-clas {
border-top: 1px solid #A12EB3;
}
.chat-box-main {
height: 400px;
overflow-y: auto;
}
.chat-box-div {
border: 2px solid #A12EB3;
border-bottom: 2px solid #A12EB3;
}
.chat-box-head {
padding: 10px 15px;
border-bottom: 2px solid #A12EB3;
background-color: #B25AE5;
color: #fff;
text-align: center;
}
.chat-box-left {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
border: 2px solid #73AD21;
border-radius: 25px;
}
.chat-box-left:after {
top: 100%;
left: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-left {
margin-top: 30px;
margin-left: 60px;
text-align: left;
color: #049E64;
}
.chat-box-name-left img {
max-width: 40px;
border: 2px solid #049E64;
}
.chat-box-right {
width: 100%;
height: auto;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
}
.chat-box-right:after {
top: 100%;
right: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-right {
color: #354EA0;
margin-top: 30px;
margin-right: 60px;
text-align: right;
}
.chat-box-name-right img {
max-width: 40px;
border: 2px solid #354EA0;
}
.chat-box-footer {
background-color: #D8D8D8;
padding: 10px;
}
Here my requirement is to automatically set the width of each box(div) as per the content entered and float them accordingly to left/right.
Currently my output is as below.
Here as seen in the above screenshot, though there is only one word in the div, it is taking the entire width. Please let me know on how can I limit this to the text width.
Thanks
try this https://plnkr.co/edit/KXF1jkOd7G9JB8j7DIGC
I have changed the div to span. Hope this helps !
<span class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</span>
Are you looking some thing like this, Try this add display: inline-block; to div
.hr-clas {
border-top: 1px solid #A12EB3;
}
.chat-box-main {
height: 400px;
overflow-y: auto;
}
.chat-box-div {
border: 2px solid #A12EB3;
border-bottom: 2px solid #A12EB3;
}
.chat-box-head {
padding: 10px 15px;
border-bottom: 2px solid #A12EB3;
background-color: #B25AE5;
color: #fff;
text-align: center;
}
.chat-box-left {
width:auto;
height: auto;
padding: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
border: 2px solid #73AD21;
border-radius: 25px;
display: inline-block;
}
.chat-box-left:after {
top: auto;
left: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-left {
margin-top: 30px;
margin-left: 60px;
text-align: left;
color: #049E64;
}
.chat-box-name-left img {
max-width: 40px;
border: 2px solid #049E64;
}
.chat-box-right {
width:auto;
height: auto;
padding: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
border: 1px solid #C5C5C5;
font-size: 12px;
display: inline-block;
}
.chat-box-right:after {
top: 100%;
display: inline-block; right: 10%;
border: solid transparent;
content: " ";
position: absolute;
border-top-color: #C5C5C5;
border-width: 15px;
margin-left: -15px;
}
.chat-box-name-right {
color: #354EA0;
margin-top: 30px;
margin-right: 60px;
text-align: right;
}
.chat-box-name-right img {
max-width: 40px;
border: 2px solid #354EA0;
}
.chat-box-footer {
background-color: #D8D8D8;
padding: 10px;
}
<div class="panel-body chat-box-main">
<div class="chat-box-left">Hello, Welcome!. You can ask me
questions on Compliance Policy ..</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle"> - Bot
</div>
<hr class="hr-clas">
<div class="chat-box-right" id="chatbox">Hi</div>
<div class="chat-box-name-right">
<img src="smiley.jpg" alt="bootstrap Chat box user image"
class="img-circle">
</div>
<div class="chat-box-left">Hello</div>
<div class="chat-box-name-left">
<img src="compiler-bot-static.gif" alt="bootstrap Chat box user image"
class="img-circle">- Bot
</div>
</div>
I'm making a titled box with css.
And my code is something like this.
I've ignored some attributes like width or height in my code.(Because I don't know why stackoverflow keeps telling me that I 've got too many codes here..)
.sponsor_info {
border-radius: 10px;
border: 1px solid #eeeeee;
width:200px;
height:50px;
padding: 0px;
}
.sponsor_info .headbar {
border-radius:10px 10px 0px 0px;
width:200px;
height: 40px;
margin-top: 0px;
background-color: #8BBE26;
}
.sponsor_info .headbar p {
font-size: 20px;
font-family: arial;
color:white;
line-height: 100%;
margin-left: 3%;
margin-top:0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
I can get something like below
The question now is: I don't know why there is some space between the outer grey border and the inner green bar.
.sponsor_info {
height: 200px;
border-radius: 10px;
border: 1px solid #eeeeee;
padding: 0px;
}
.sponsor_info .headbar {
height: 100px;
border-radius: 10px 10px 0px 0px;
margin-top: 0px;
background: #8BBE26;
}
.sponsor_info .headbar p {
line-height: 100px;
margin-left: 3%;
margin-top: 0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
change it to:
.sponsor_info .headbar p {
line-height: 100%;
margin-left: 3%;
margin-top: 0px;
}
I'm trying to get 2 divs to sit side by side, a div for an ad (skyscraper_ad), and a main black (smaller_main) but when I add a float the DIV will overlap another DIV, can somebody help?
My css:
#skyscraper_ad {
display: block;
width: 160px;
height: 600px;
padding: 5px;
margin-right: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:relative;
margin-bottom: 4px;
}
#smaller_main {
display: block;
width: 605px;
height: auto;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
position:absolute;
padding: 5px;
float: right;
margin-bottom: 4px;
}
This should work:
#skyscraper_ad {
width: 160px;
height: 600px;
padding: 5px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
margin-bottom: 4px;
float:left;
}
#smaller_main {
width: 605px;
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
padding: 5px;
float: left;
margin-bottom: 4px;
}
I took out your references to margin, positioning, and display. (and a height:auto which was meaningless as far as i could see). The margin auto was meaningless, the positioning was probably causing overlap, and the display was redundant (divs are already block)