This is the result when i use Wicked_pdf to convert my html.erb page to pdf.
Problem: Seem table 's tr has been splitted into two pages.
What i tried without success:
Use page-break-inside as described here or here
table, tr, td, th, tbody, thead, tfoot {
page-break-inside: avoid !important; }
putting text within a div, as explained here
here
Another option: place each tr in its own tbody and then apply the
peage break css rules to the tbody. Tables support multiple tbodys.
A bit of extra markup, but works decently for me.
I am using Ruby on Rails 4.2.6, Wicked_pdf latest version, bootstrap.
Relate issue on github
Question: How can i make table 's tr not split into two pages.
well, to solve this you have to user page-break-inside: avoid !important; with the repeated div the results in this overflow.
like if you have:
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
which results in overflow that will make things overlap with the header within the page breaks..
so >> use: page-break-inside: avoid !important; with this class article.
table.report-container div.article {
page-break-inside: avoid;
}
---> here is a full answer to print a page properly using html/css
Related
I have an html fragment that looks like this:
<style>
.r {
display: flex;
}
.d-flex {
display: flex;
align-items: center;
}
</style>
<div class="r">
<input type="radio" disabled="disabled" value="1">
<div class="d-flex">
<span class="answernumber">1) </span>
<div class="answer"><p>One</p></div>
</div>
</div>
When I render this in a browser the radio button, the "1)" and the "One" are all aligned nicely. But when I render this html in a pdf the radio button is not aligned with the text. I have tried multiple alternative style definitions for the classes r, d-flex, answernumber and answer and also for the input[type="radio"] and every time it looks good in a browser, the result is no good in the pdf.
Interestingly, check boxes work just fine. Is there a way to get the html to render in the pdf aligned? Or is this something that needs to be fixed inside iText?
The html inside the div.answer may be much more complex and I have no control over it as it is delivered to me by an external system, so I am limited as to what I can do with the html. What I am in control over, is the style definitions and any configurations to be done to iText (perhaps some ConverterProperties).
my IE8 doesn't show images inner the figure tag.
TYPO3 Installation 6.1.x
DOCTYPE HTML5
css styled content (latest)
Frontend: Text & Image will shown as
<div class="csc-textpic-imagewrap">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img height="308" width="828" alt="" src="fileadmin/media/image.JPG">
</figure>
</div>
</div>
</div>
I 've included HTML5shiv Script - nothing happens .. then I tries to unwrap the figure element with jQuery - nothing happens
Has anyone an idea how I can show my image wrapped with
it was a responsive big
img {
max-width: auto;
width: 100%;
/* and for IE 8 */
width: auto\9;
}
That's it Damn.!
I had the same problem:
tt_content.image.20.rendering.singleNoCaption.singleStdWrap.wrap.override >
tt_content.image.20.rendering.noCaption.singleStdWrap.wrap.override >
Or instead of deleting it, replace it with whatever html you like.
just set this in config typoscript
doctype = html5
I have been using css selectors as div and span till now while using Selenium WebDrivers with Ruby for testing.
However I have some dd and xmlns:dd attributes as well. Is it possible to have a css selector for this as well.
Html Code:
<div class="class1 class2 class3 class4" style="padding: 4px;" id="_c04a6325-5316-4177-980f-38484eb27730">
<span class="class5" style="font-weight: bold; text-decoration: underline;">Month</span>
<div class="class6" dd:contenttype="Month" dd:referenceuuid="1446A201-FD91-4A82-B645- 306DC948DC48" id="_3d510b04-8a5a-4bf9-bc7a-8efd55f9ca48">
<div xmlns:dd="Week" class="class7 class8" dd:entityid="1457893" dd:contenttype="Monday" id="_7480bbe4-bbf0-4a54-8994-ae773b418470">
Breakfast
</div>
</div>
</span>
</div>
What I presently do:
$driver.find_elements(:css, 'div.class7.class8')
What I want to do:
Something like this to use the data in dd:contenttype and/or xmlns:dd to find an element
$driver.find_elements(:css, 'div.dd:contenttype="Monday"') OR
$driver.find_elements(:css, 'div.xmlns:dd="Week"')
Is the possible to find and element using dd:contenttype and/or xmlns:dd??
use $driver.find_elements(:css, 'div[dd\\:contenttype="Monday"]')
for more information you can take a look on http://sauceio.com/index.php/2010/01/selenium-totw-css-selectors-in-selenium-demystified/
Try this way:
$driver.find_elements(:xpath, "//div[#class = 'class6 class7' and #dd:contenttype = 'Monday'")
The above should work.
I am currently working with a page that has a few hidden divs, being called on to be displayed later.
This is the code I have on the page itself causing the problem.
<div align="center" id="check">
Block of plain text right here.<br />
Checking...<br />
<img src="http://sw6.us/template/images/loading.gif" /><br />
<?php
require("databasetest.php");
?>
echo "check_data shown";
</div>
This code here is what I have modifying the "check" div on a style page
.check {
padding-top: 25px;
padding-left: 0px;
color: white;
align: center;
display:none;
}
As you can see the div is instructed to be hidden on page load via the style code. Everything is hidden except for the picture.
I don't believe the PHP is the issue because I included an echo displaying text which is properly hidden along with the HTML before it. I also took out that require command and the image was still not hidden. The image being a .GIF is not the issue either, I have tried using a .png and got the same problem!
Thanks for the help! It is greatly appreciated!
Let's say that I have two html pages that are identically designed, but have different content. I have the same div with the same id on both pages. How do I use jQuery.load (or what do I use) so that the div#conent does not get added into the div#content of the first page.
I've tried this:
$(document).ready(function(){
$("a#linkHome").click(function(){$("div#content").load('index.htm #content');});
$("a#linkPage2").click(function(){$("div#content").load('page2.htm #content');});
});
... but it ends up adding another div to the already existing div!
<div id="content">
<div id="content">
Blah Blah Blah
<div id="content">
</div>
Try with:
$(document).ready(function(){
$("a#linkHome").click(function(){$("div#content").load('index.htm #content *');});
$("a#linkPage2").click(function(){$("div#content").load('page2.htm #content *');});
});
in this way you get all elements inside the div#content but not the div itself.
Or you can try the opposite approach. Just add a wrapper div into your target page.