I'm using wkhtmltopdf to export some html pages to pdf. One of those pages is a "Business Model Canvas" that is filled with text.
The problem is, after the export, text inside each tile/panel of the canvas stays in 1 line, meaning it gets cut when it reaches the border of that div, instead of going to the next line, like the html page does.
This is what it looks like, html on the left and pdf on the right:
I tried to mess with some CSS properties like overflow, text-overflow, width or white-space, but I had no luck.
In theory, both the html and pdf share the same properties, I'm guessing the export happens too fast and the external css files don't load properly or something like that.
Either way, I could try some in-line css for the canvas template, if you have any suggestions besides the ones I tried.
After repeating the process again, made it work with white-space: normal;.
Probably had something adding extra css to the same element before.
I can't find a solution to this problem, but I avoid it it setting the same margin for all pages of my PDF. I realized that if I set a default margin to all pages except the first which has a different margin, text overflow oddly.
Related
Page margins/padding at page break
I'm trying to create a full-width two column layout pdf using WkhtmlToPdf. Normally not a problem at all. But in my case I have a sidebar with a background color. The issue that occurs is that the sidebar has it's own padding. When the page breaks the content breaks just as expected but without the padding. This is the expected behaviour (as seen in Example A). My question is how one could achieve this 'cloned' padding when breaking the content (desired result example B).
After some searching I thought of the box-decoration-break css property. But from what I could find only Prince partially supports this property for table elements Prince box-decoration-break example and from what it seems only for the border property.
But hey I could make that work, setting a transparent border for the top and bottom should give me the same effect as padding. But as you may know buying a Prince license is a pretty costly bussiness (at least for my current project it's not an option). And it's not the best solution with the need of extra html markup as only table elements are supported.
Hoping someone who is familiar with YUI's CSS templates can help me debug a CSS problem. I'm using a free html resume template I found on the net, and I want to print it on paper via the browser's print function. I am not publishing this on the web. My problem is that there's about a 75-pixel gap between the top of the first div and the browser's display area that I can't figure out how to get rid of. Looking at the image below, there is a red arrow that points it out.
YUI CSS gap between top of screen and div
The template can be found hosted at this location.
What I've done:
Open the element inspector in the browser. Looks like the gap is between the <body> and first <div>.
Downloaded the YUI CSS file to look at. Checked out all the div selectors, nothing interesting.
Looked at the .yui-t7 class, nothing interesting there either.
My suspicion is that some of the float and clear are adding up and causing the space, but this is outside my expertise.
I was looking for height values or padding that would clue me in on how to change it, but honestly I don't see heights anywhere in either css file. I admit that I am not strong in CSS at all. I'm open to other solutions too, just enough to get the thing printed so I can send it out!
This BR Adds a little space
The margin on this div adds the rest of the space
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I had a page setup the way I wanted, with a logo absolutely positioned in the lower right:
http://testing.wizbury.com/onlinegamepage2.php?id=6
Then I added the following entry to the css, so that when a line of text in the box ran too long it wouldn't add so much extra space:
.ogfeatures li span {
vertical-align:middle;
display:inline-block;
line-height:1em;
}
That addition causes the logo to sit in the upper left of the content area (under the flash game). I can only post to links, but it is the same link as above, using onlinegamepage.php
The page dynamically generates a lot of content from a db, so Dreamweaver's preview doesn't work well. I decided to throw the code into fiddler and hard code things so I could play with the layout...and it works fine in fiddler, even with the spans added in.
http://jsfiddle.net/wrX8g/
So now I am completely befuddled. I'm sure there is something simple going on that I am missing, but I can't figure it out. I'd greatly appreciate any insight.
Thanks,
Doug
I'm not sure if StackOverflow is doing it or if it's in your original code, but when I copy your CSS into another file, after the closing }, there is a Zero-Width Space character, which isn't valid in CSS and, I believe, causing the declaration to be thrown out by the browser. I speculate that in whichever browser ytou're using, it's also throwing out all subsequent declarations, and that you've put that bit of CSS code right above the CSS declaration that positions the logo, thus preventing that declaration from taking affect and putting the logo where it would be without any applied CSS.
The fix is to simply remove the offending character, which you can probably do by putting your caret to the send of the line with the } in it, and backspacing. The caret shouldn't move, which tells you it removed an invisible character. If that doesn't work to remove it, you could also do it in a hex editor.