I have a long table which shows rows on several pages. When a page ends, the row is printed half on one page and half on the next page. How can I make sure that the rows is printed completely on the new page?
CSS property: page-break-inside: avoid; on HTML tr element does it.
Tested with:
wkhtmltopdf 0.12.3 provided for Linux (Ubuntu Trusty) 32-bit / 64-bit built on Ubuntu 14.04.2 as provided at:
http://wkhtmltopdf.org/downloads.html#stable
A quick and dirty test may look like:
<tr style="page-break-inside: avoid;">
<!-- A little border to see the result more easily -->
<td style="border: solid 1px blue;">
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
Large text possibly displayed on several pages ...
</td>
<td>col2</td>
<td>col3</td>
</tr>
Mozilla Developer Network page-break-inside description
Will be nice to add this CSS with respective classes
#main_div {
position: relative;
width: 672px; /* find your width in px based on the page margins */
}
tr td {
page-break-before: auto;
page-break-inside: avoid !important;
}
But the most important is to give to your container which contains the table (or some parent div) a fixed width in pixels. Should work for most (WebKit) pdf generators and permit them to calculate correctly the heights.
I can confirm that works for me with wkhtmltopdf 0.12.6 (with patched qt) in kubuntu
Related
I use Prestashop 1.7.5.1.
I want the description block and product details on the product page to be on the right side of the page and also fill the entire width of the page. How can I do this? What changes should be made to the product.tpl file or to the corresponding CSS file.
It is difficult to assist you because you did not post a fiddle with your HTML/CSS code, please try to edit/update your question.
However, I'm assuming you are using the default template coming with PrestaShop 1.7.x so you should have two columns with the class "col-md-6" inside your product.tpl file.
Simply put style="float:left;" on the one containing the product picture and style="float:right;" on the other.
Regarding the width of these columns, there are currently constrained by the element:
#media (min-width: 1200px)
.container {
width: 1140px;
max-width: 100%;
}
You can for the width to 100% with width: 100%; instead, I wouldn't recommend doing this though.
Final result:
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
I've seen this problem touched on in many questions but none have been specific enough to help me. So I hope it offends no one if I simplify it and ask again. Hope springs eternal!
Is it really IMPOSSIBLE to control the width of an image embeded in an email when Outlook renders it? I.e. control the width of an image for which the html code is
<img src="cid:seal">
I.e. when the html code expects an embedded image instead of one stored elsewhere.
[Note: "seal" is the content ID I assigned when creating the MimeBodyPart with the embedded image].
Details:
I use a Javamail application to send a multi-part email message. The body part is an html document. Another MimeBodyPart carries the image used in the html doc. I've simplified the html test to nothing more than a two column table with the left column for the image and the right column for text.
And absolutely NOTHING I have tried has been able to control the size of the image when opened in OUTLOOK.
The image is always what I assume must be some native size for the image ... which is too big ... so it forces the first cell to be more than 15% wide. Or if I give the cell a fixed width the image overflows the box, i.e. get's clipped.
I put the basic code stripped of all font styling colors etc. below.
I have tried every combination of using width attributes and css style properties on the img tag. I've wrapped the image in another table ... or wrapped it in a div block inside the main table cell ... and even wrapped it in a div block inside a table cell inside the parent table cell. And I've tried specifying widths in fixed pixels and %'s.
It would really be nice if we all knew for sure if this is simply IMPOSSIBLE with Outlook.
Or if it is possible possible, to publish sample code that works. [It's hugely attractive to have the email open its images immediately, and not rely on the reader downloading them.]
NOTE: I seem able to control width when I load the image from an outside source afterwards, i.e.
Thanks for any help.
<html>
<head>
<meta name="viewport" content="width=980, initial-scale=1">
<title>Test Email</title>
</head>
<body style="width:100%; border:0;margin:0;padding:0;">
<table align="center"
style="width:980px; border-collapse:collapse;
margin-left:auto; margin-right:auto;">
<tr style="border:0; margin:0; padding:0;">
<td style="width:15%; border:0; margin:0; padding:0;">
<img src="cid:seal"
style="width:6em; height:auto;">
</td>
<td style="width:85%; margin:0; padding:.5em 0em 0em 0em; border:0;">
Some Titles and stuff
</td>
</tr>
<tr>
<td colspan="2" style="border:0; margin:0; padding:1em 1em 0em .5em;">
<p> 1st paragraph
....
<p> last paragraph
</td>
</tr>
</table>
With help from Eugene above, I discovered at least one good solution.
<img src="cid:seal" width="300" or "300px" of "15%"> DOES NOT WORK.
But when I ditched the quotes this worked
<img src="cid:seal" width=300 height=300>
It does of course mean setting width in % is still a problem since it requires quotes.
But I'll take what I can get. Email now pops open with logo without the user needing to download pictures. AND ... this css body selector also works rendering the background with an embedded image. [I stored the background image with a Content ID of"bkg".]
AGAIN ... unlike the img attribute src="cid:id" that uses quotes, url() requires the id w/o quotes.
<body style="background-image:url(cid:bkg);
background-repeat:repeat;
width:100%;
generic-family:Sans-serif;
font-family:Verdana;
border:0;margin:1em 0 1em 0;padding:0;">
Outlook uses Word as an email editor. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
You can design the page in Word and then save the resulted document as a web page. Thus, you will find the required HTML markup to use.
How to scale up images in bootstrap 3?
Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%; and
height: auto; to the image so that it scales nicely to the parent
element.
With the following code the image scales down well, but it's not get the parent div's size on larger screens.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-md-5" style="background:yellow">
<div class="image-container" style="background:green">
<img src="http://placehold.it/350x150" class="img-responsive">
</div>
</div>
</div>
How to do that? Demo: http://www.bootply.com/8uXBxX8Qjy
You can set the image width to 100%. The img-responsive sets max-width to 100%, the image itself will never be larger than it's actual dimensions. Setting the width to 100% will force it to be the width of its parent regardless of its actually size, but be warned that this can sometimes cause images to become pixelated depending on the image size and how much it is being scaled to fit.
I previously had this issue, I was using a theme based on Bootstrap 3.
I was using the theme in Wordpress live site.
Problem
The problem was that, image enclosed in img tag and which further was enclosed in Wordpress's own class defined for image. And the image not properly scaled.
Images having low width would fit inside the main div, in which the image was placed, some images having big width, going outside of the main article. And using such broken CSS functionalities is a havoc for my website. Until I found the solution.
Solution
Find which img tag is responsible for image scaling, you can test in Browser's inspect element, and find which tag is responsible for image scaling. And put the below code there and test. And your theme could have different tag responsible for img scaling property set with Bootstrap.
For mine it was :
img{
vertical-align: middle;
width: 100%;
height: auto;
}
The theme already had, img{vertical-align: middle} present, so I tested for width:100% and the rest CSS rule, and it worked. Your theme could have some differnt CSS rule or tag set, find that and apply. But these two rules should be applied to scale image properly. Thanks #David Taiaroa for height: auto CSS rule
All my site WC3 happy - except one page with three small notes ...
On this page I embedded Slider that somehow causes this message:
Line 149, Column 31: there is no attribute "WIDTH"
<a href="images2/1.jpg" width="1280" height="960" border="0">
Maybe it is because the slide is not supported fully on my site?
In addition, even though I gave height/width settings to all photos,
I got a note (website load time testing) give all these settings pictures ...?
this is a simple validation message. Cause DOCTYPE (HTML 4.01 Transitional) you are using deprecates visual formating html attributes like width, height, border etc. You can use CSS-properties instead or ignore this if it these attributes are set by a some <script>, e.g. your slider, there will be nothing dangerous. CSS is:
img {
width: 1280px;
height: 960px;
border: none;
}
website load time testing is, as I can suppose, a message from your developing tool. I think it is normal. Except one point: your site for some reason is very slow to load, so the message refers to that issue. When a page loads fast you simply do not have time to spot it.