I'm using wkhtmltopdf v0.11.0 rc1 in a Rails application through wicked_pdf (I know wicked_pdf does not support the new command line parameter notation, I'm using my own fork of the gem). I thought that content not fitting within a page should automatically overflow to the next one, but this is not the case - I'm seeing text just being cut off, sometimes in the middle of a line.
I know I can layout my pages using page-break-after:always, but this looks like dirty hard-coding, and besides the HTML comes from an ERB template so it's not always obvious where to put page breaks.
Can something be done so that page breaks are inserted automatically? Am I missing something about how this works?
Here's what the generated command line looks like
\"c:/program files (x86)/wkhtmltopdf/wkhtmltopdf.exe\"
--header-html \"file:///C:Users/bleak/AppData/Local/Temp/campaign_report.header.pdf_pdf_1580_0.html\"
--footer-html \"file:///C:/Users/bleak/AppData/Local/Temp/campaign_report.footer.pdf_pdf_1580_0.html\"
--margin-top 20 --margin-bottom 15 --margin-left 5 --margin-right 40
--page-size \"A4\"
page \"file:///C:/Users/bleak/AppData/Local/Temp/campaign_report_cover.pdf_pdf_1580_0.html\" --disable-javascript
toc --xsl-style-sheet \"c:/work/morizo/admoney/app/views/layouts/campaign_report.xsl\" - -
It turned out that this was happening due to fixed sizes on divs used to wrap document sections:
div.page {
width: 180mm;
height: 277mm;
overflow: hidden;
page-break-after: always;
}
Once I removed width and height, auto breaking started working as expected. Simple.
Related
i understand v-cloak is used to display nothing when a new page is loaded.
in my rails app, when i try to switch page (i am using vue component in Rails View), there is a short glimpse of Vuejs codes displaying curly braces before another new page is load. i am entirely baffled and not sure if this is turbolink related as there is no error message found in browser console, or in the rails git logs.
this short glimpse of Vuejs displaying curly braces before another page is loaded, is really annoying, can anyone help on this?
v-cloak is used to do this.
official APIļ¼
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
tips: written [v-cloak] in #import loaded css file can't work for this problem.
another way: around target tags.
Apart from using [v-cloak] which is a generic way of completely hiding an element until Vue inits, two more usable "tools" are v-text and v-html directives, coupled with computed properties delivering the strings the above directives expect from more complex logic.
Not only do they hide the content until init time, but they can also serve as selectors for the unparsed template elements, as they get removed from the element once Vue parses it. So you could apply backgrounds, width, min-heightto those elements, without the need to spiff your layout with preload classes and remove them on mounted().
An important note here is that transitions won't work on those elements, because Vue purposefully rebuilds the entire DOM of the template once it mounts. If it didn't, enter animations wouldn't work as expected. So there can be no transition from h2[v-text] to h2, because the element is completely replaced. But you can take that into account and start your enter transition from how the [v-text] element was styled.
It's probably not the solution you're looking for (it's more designer's work than programmer's, really) and it's definitely not a magical one liner: it has to be solved on a page by page basis.
But this is how pre-loaders are done (the technique is the same in any modern FE framework, it's just that sometimes you need to spiff your markup with preload classes and remove them on mounted, ngAfterViewInit or componentDidMount).
To be able to style this at your own pace, simply disable JavaScript (or don't init Vue, if you prefer) so you set every detail right. But don't overdo it.
Here's a basic example showing you don't need a whole lot of detail to get a decent effect. It's a matter of roughly matching element heights and coding in some striped CSS backgrounds, really (throw in a blur filter, if you want to get really fancy):
Vue.config.productionTip = false;
Vue.config.devtools = false;
setTimeout(() => {
new Vue({
el: '#app',
data: () => ({
Message: 'Message',
Description: `<p>I'm baby tousled echo park pabst polaroid synth marfa. Migas small batch paleo pop-up street art, chia sriracha cronut ramps succulents portland. YOLO normcore taiyaki organic. Green juice helvetica single-origin coffee polaroid swag selvage schlitz. Artisan la croix unicorn cardigan meh everyday carry wolf thundercats.
<p>Iceland hoodie vice, chicharrones gentrify dreamcatcher ethical jianbing blog truffaut pinterest VHS flannel selfies bushwick. Flannel activated charcoal bespoke master cleanse, chambray tumblr four loko helvetica chicharrones ugh aesthetic irony godard. Beard farm-to-table mumblecore wolf typewriter try-hard shoreditch church-key scenester tousled letterpress yuccie bitters. Selfies +1 man bun, jianbing hell of tote bag crucifix flexitarian. Cronut mumblecore knausgaard meditation authentic lumbersexual listicle pok pok coloring book pitchfork gentrify. +1 offal cronut, flexitarian glossier shoreditch biodiesel stumptown tumeric seitan polaroid.
<p>Narwhal williamsburg adaptogen, four dollar toast retro chillwave occupy kombucha YOLO marfa franzen kogi biodiesel street art next level. Viral blog taxidermy twee echo park roof party. Hammock street art tumeric selvage sartorial. Paleo hashtag activated charcoal, heirloom quinoa cred blog ethical.`
})
})
}, 1000)
#app h2[v-text] {
width: 200px;
background-color: #f8f8f8;
height: 1em;
}
#app div[v-html] {
min-height: 250px;
background-image: repeating-linear-gradient(
180deg,
#fff,
#fff 10px,
#f5f5f5 10px,
#f5f5f5 20px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2 v-text="Message"></h2>
<div v-html="Description"></div>
</div>
When applying this technique, do not use images, as they require loading as well. Work with CSS only and make sure that CSS is available in <header> (or at least before the app element). Last, but not least, keep in mind your preload has to match your app at all screen widths.
I have set gcov code coverage tools on Jenkins.
This works fine, but I have troubles undertanding the ouput color code.
The number of 'hits' of each line is corect, but some line are green when others are red, and I can't tell why.
Example :
Note that the setYear method is all green, and called 13 times (ctor + 12 times in setDateAAMMJJ as you can see on the screen cap)
If you look at the source code for the cobertura-plugin on github you will see that:
table.source tr.coverPart td.hits, table.source tr.coverNone td.hits {
background-color: #fdd;
font-weight: bold;
}
and
table.source tr.coverPart {
background-color: #ffd;
}
#fdd is the red color,
#ffd is the yellow color
You should be able to use your browser 'developer tools' or 'inspector' function to see which class is applied.
What does it mean?
The yellow on the far left means the source code is covered partly, that means you probably don't have 100% coverage in the functions that are being called.
Another case I can think of (pure speculation at this point) is that some optimization is mangling your statement coverage; check your compilation flags.
If you kept the data (lcov files), you should be able to use genhtml to generate a report and compare.
Don't know if this applies for you but it seems relevant.
In my case it is red because branch cover is not 100%.
When generating an xml with gcovr it also adds branch cover data.
It is possible to cover all the lines but not cover all the branches.
Im having all kinds of problems with the branch cover.
Some are described in these posts.
Why gcc 4.1 + gcov reports 100% branch coverage and newer (4.4, 4.6, 4.8) reports 50% for "p = new class;" line?
What is the branch in the destructor reported by gcov?
Still looking for a way to solve issues like these..
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
I have a page with this code (generated by JSF 2.1.3 running on Glassfish 3.1.1
<a class="pagenumber"
onclick="mojarra.ab(this,event,'click',0,'main:coupon-all main:page-top main:page-bottom');return false"
href="#"
id="main:j_idt221:0:j_idt224">1</a>
This is generated from this part (inside a ui:repeat):
<h:commandLink styleClass="pagenumber">
<f:ajax listener="#{productDetailInfoView.changePage(page)}"
render=":main:page-top :main:page-bottom :main:coupon-all"/>#{page}
</h:commandLink>
Where:
:main:page-top is the ID of the top of the page navigation
:main:page-bottom is the ID of the bottom of the page navigation
:main:coupon-all is the ID of the ui:repeat that lists all the products in the page
ISSUE:
On most browsers (as usual) and also IE 7 and IE 9, everything is just fine. But on IE8 (mostly on Windows XP but probably on Vista/8 too), the browser crashes and reload the page saying it has "recovered" it (sometimes shows the "Crash report" page and ask to send report to MS or cancel).
Additional info:
I actually spent quite a lot of time debugging this, and the issue seems to be in the jsf.js (I use Stage: development to get the full version), in the ajax response part. But I couldn't find which precise part of it because after debugging the jsf.ajax.request(...) part then it's all asynchronous and I got stuck with nowhere to break-point. Sending the request seems ok as the browser crashes when this call completes.
Now the thing is that if I remove one of the element to re-render (either one of the navigation bar or the list of products), the remaining elements are rendered without error. However I need all the 3 elements rendered, not just two...
EDIT: 12/07/05
I found that a highly connected item to the issue is PIE.htc for the round corners. Many of the elements in the 3 blocks I need to re-render have styleClass that use CSS like this:
.round {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url('../PIE.htc');
-khtml-border-radius: 5px;
}
The PIE.htc file is found and round corners are correctly displayed in IE7 and 8 as expected. However it makes the page very very slow on these IE browsers (I don't mind, I have been allowed to remove round corners for IE).
BUT the very weird thing is that if I simply remove all reference to PIE.htc in the CSS, then I still have the error. Maybe the other border-radius are creating issue. I am currently trying to remove any kind of round corner, even for all browsers and see where it leads.
My page is also XML validated.
Any help appreciated...
I'm using sIFR 2.0.6 with the sifr.js file from 2.0.7 to resolve this issue: http://novemberborn.net/sifr/2.0.7.
In all browsers, before overwriting the sifr.js file, the sIFR displayed with initial caps. With the new sifr.js file in place, the text is all uppercased.
This is the only code I am customizing:
if(typeof sIFR == "function"){
sIFR();
sIFR.replaceElement(".sifr-container",
named({sFlashSrc: "frutiger.swf",
sColor: "#042e66", sCase: "lower",
sWmode: "transparent",
background-color: "transparent"})); };
sCase doesn't appear to be doing the trick. How else can I control the uppercasing?
Thanks!
Veda
You can't have background-color like that in the replacement syntax. You sure that's correct?
Try inspecting the Flash movie's embed element to see if the text is uppercase or normal case when going into the Flash movie. You might want to try recreating the Flash movie as well.