Using wkhtmltopdf 0.11.0_rc1 (weirdly reporting itself as 0.10.0 rc2) on MacOSX.
This input HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css">
#page{
size: landscape;
margin: 10mm;
}
div.page {
height: 180mm;
width: 274mm;
overflow: hidden;
border: 1px solid #ddd;
page-break-inside: avoid;
page-break-after: always;
}
</style>
</head>
<body>
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
</body>
<html>
being processed like so:
wkhtmltopdf --orientation landscape input.html output.pdf
results in no page breaks:
What am I doing wrong?
This might just be a problem of this specific version of wkhtmltopdf.
The most current version wkhtmltopdf 0.12.1 (with patched qt) does respect the page breaks.
Related
My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
The svg rect works well in chrome, but not in firefox. What is the problem? Also, is there any special rules in using svg in firefox?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect {
width: 300px;
height: 100px;
fill: green
}
</style>
</head>
<body>
<svg width="400px" height="110px">
<rect/>
</svg>
</body>
</html>
I have the next code:
<!doctype html>
<head>
<head>
<meta charset="utf-8">
<title>Goerman</title>
</head>
<body>
<center>
<div id="image">
<img alt="Embebed Image" src="data:image/gif; base64,R0lG--IMAGE IN BASE64--="/>
</div>
</center>
</body>
</head>
I need that the animate image auto-set to screen the device or size of the navigator.
Add the following class to your style sheet and the corresponding class to your img tag
<style>
.responsiveImage {max-width: 100%; width: auto; height: auto;}
</style>
<img src="data:image/gif; base64,R0lG--IMAGE IN BASE64--=" class="responsiveImage" />
I'm not getting rounded corners in IE8 mode within IE11.
I've tried both relative and absolute paths, and neither work.
The PIE.htc file is in the same folder as the html file. I'm running on Jetty and don't have a .htaccess file. The PIE.htc file can be loaded without any problem using http://localhost:8383/various_forms2_less/PIE.htc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
span.command_link_buttoned {
background-color: #96AFCF;
display: block;
width: 130px;
height:30px;
position:relative;
border-radius: 5px;
behavior: url(PIE.htc);
/*behavior: url(http://localhost:8383/various_forms2_less/PIE.htc);*/
}
</style>
</head>
<body>
<span class="command_link_buttoned">
Button
</span>
</body>
</html>