i am using tcpdf.php to create a pdf.here is my simple html,when i print html,it is ok but when i write pdf it shows nothing.
require_once('../config/lang/eng.php');
require_once('../tcpdf.php');
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
$html='
<div style="background:#2185E7;color:#fff;padding:5px;overflow:hidden;width:786px;">
<h3 style="margin-bottom: 0; margin-top: 0;padding-left: 17px;text-align: left; white-space: nowrap;float:left;">My Company name: 2533</h3>
<p style="margin: 0; padding-right: 14px;text-align: right; white-space: nowrap;float:right;">321 32111 4</p>
</div>
<div style="background:#2185E7;color:#fff;padding:5px;overflow:hidden;width:786px; margin:10px 0 0 0;">
<p style="margin: 0;">Elegant 3 B/R + Maids in , Dubai </p>
</div>
';
$pdf->writeHTML($html, true, false, true, false, '');
$pdf->Output('example_006.pdf', 'I');
You need to remove css attr color:#fff in the first div. I don't know why but it's OK when remove out.
P/S:TCPDF don't understand attribute margin and padding. My solution is always use html tag table for layout all general PDF. You should try it.
Related
I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs.
What I want it that jumping being prevented, and instead it animates somehow, so I get a nice smooth transition when switching between elements without it "pushing" down to content with a "jump"..
Hope it makes sense :)
I've setup an example on codesandbox here: https://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
The template looks like:
<div class="hello">
<button #click="groupShowOne">Show first {{ gShowFirst }}</button>
<button #click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
The animation looks:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
Try this
Setting the transition property in the passive div:
.ele {
background-color: blue;
min-height: 500px;
color: #fff;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
Let it do some animation
eleStyle() {
return {
transform: this.gShowSecond ? "translate3d(0, 100px, 0)" : "none",
};
},
The div:
<div class="ele" :style="eleStyle">Prevent this div from jumping<br /></div>
What you can try:
Vue has a *-move class for group transitions. However, the transition-group has to be applied to all the elements including the one that has the v-move class, to work.
Here's the article link if you need it for more details: https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
(*-move basically animates items from their original position to their new position, making it smooth, rather than jumpy)
You could still work with what you have and dynamically bind a separate CSS transition for the blue box when showSecond or showFirst equate to a certain value.
Using Sortable.js I'm trying to make only Collapsible elements change their order so if I move element #1 in the place of element #2 they don't affect the green line between them. I've tried filter option but it just blocks my green line element to be draggable but I can put any element in place of it which I want to block. Is it possible to make with library like that?
Since I mentioned using swap, here's a demo that may work (I know it's late but for the record)
Sortable.create(list, {
draggable: ".list-group-item",
filter: ".divider",
swap: true,
swapClass: "highlight",
animation: 150,
});
body {
padding: 1em;
text-align: center;
}
.highlight {
background-color: #f9c7c8 !important;
}
.divider {
height: 20px;
background: green;
width: 3px;
margin-left: 50%
}
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div id="list" class="list-group">
<div class="list-group-item">Item 1</div>
<div class="divider"></div>
<div class="list-group-item">Item 2</div>
<div class="divider"></div>
<div class="list-group-item">Item 3</div>
</div>
I'm using bootstrap 4 input-group and appending or pretending my inputs with add-ons as labels.
For the inputs its looking good. Now I need a multi-line add-on or label for text area.
I'm looking for best possible solution in Bootstrap or CSS.
Here is the code I'm trying.
<style>
.h-unset {
height: unset !important;
}
.multiline-label {
display: inline-block;
word-wrap: break-word;
word-break: break-word;
width: 100%;
}
</style>
<div class="input-group input-group-sm mb-3 row mx-0">
<div class="input-group-prepend col-md-3 px-0">
<label for="naastVastgoedbeleg-ging"
class="input-group-text w-100 rounded-0 multiline-label h-unset"
id="label-naastVastgoedbeleg-ging">
<strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
</label>
</div>
<textarea id="naastVastgoedbeleg-ging"
class="form-control rounded-0 col-md-9 h-unset"
aria-label="naastVastgoedbeleg-ging"
aria-describedby="label-naastVastgoedbeleg-ging">
</textarea>
</div>
Thankx for helping Happy Coding!
It worked by using this css
.multiline-label strong {
white-space: pre-wrap;
}
I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.