|
|
Rank: Member
Groups: Member
Joined: 8/17/2012
Posts: 22
|
Hi
No matter how much I try to get EO.Pdf to create a gradient in a div background, it will not work. I have tried these options and none of them work.
I have tested this on your own site with no positive result.
Is this a CSS feature that is supported at all in EO.Pdf?
background-image: linear-gradient(top, #999999 0%, #666666 100%);
background-image: -o-linear-gradient(top, #999999 0%, #666666 100%);
background-image: -moz-linear-gradient(top, #999999 0%, #666666 100%);
background-image: -webkit-linear-gradient(top, #999999 0%, #666666 100%);
background-image: -ms-linear-gradient(top, #999999 0%, #666666 100%);
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #999999), color-stop(1, #666666) );
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#999999', EndColorStr='#666666');
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#999999', EndColorStr='#666666')";
Thanks
Todd
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi, Please try it with the latest build from our download page and use the web kit syntax. For example, if you run our sample with the following HTML code:
Code: HTML/ASPX
<div style="width:100px;height:100px;
background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">
</div>
You will get a square with a gradient from top the bottom. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/17/2012
Posts: 22
|
Hi Thanks for your quick reply. Your example works in isolation, but not in some real situations. The problem seems to be one of repetitions not working as well as other elements interfering with the render. For example, if I just repeat the code that you gave me, the second instance fails, even though it works in a browser:
Code: HTML/ASPX
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<div style="width: 150px; height: 100px; background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">THIS IS TEST 1</div>
<div style="width: 150px; height: 100px; background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">THIS IS TEST 2</div>
</body>
</html>
You can see how even inserting a table with certain style elements interferes with the gradient render in the PDF conversion, but not in the browser version:
Code: HTML/ASPX
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<div style="position: relative; margin: 0; font-size: 5px;">
<table cellpadding="0" style="width: 100%; border-collapse: collapse; min-height: 65px; height: 65px; text-align: left; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px; border-top-width: 0px; background-color: #FFFFFF;">
<tr>
<td style="min-height: 100%; height: 100%;">THIS IS DUMMY TEXT IN A TABLE</td>
</tr>
</table>
<p style="margin: 0; font-size: 16px; padding-top: 5px; padding-bottom: 5px;">THIS IS MORE DUMMY TEXT</p>
</div>
<div style="width: 150px; height: 100px; background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">THIS IS TEST 1</div>
<div style="width: 150px; height: 100px; background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">THIS IS TEST 2</div>
</body>
</html>
I generated these problems using your own site's demo page as well as my own installation. I seem to get these problems regardless of which rendering code I use (as mentioned earlier). Thanks so much for all your help. Todd
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Thanks for the additional information. We are looking into this and will get back to you as soon as possible.
|
|
Rank: Member
Groups: Member
Joined: 8/17/2012
Posts: 22
|
Hi
Have you progressed with solving this one at all. I have a project that relies on this feature working and it is being held up.
If you think that it will require a new version release, please let me know and I will make other arrangements.
Thanks
Todd
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
Sorry about failing to update you. I believe this has been fixed in the latest build. Please download the latest from our download page and see if it resolves the issue for you.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/17/2012
Posts: 22
|
The examples I gave still don't work in your online demo.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
You will need to download it from the download page. The download page has a newer version that the online demo.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 8/17/2012
Posts: 22
|
Hi The update seems to work for just the first page. If I put a simple page break into the text, then the rendering on the second page fails. Here is example 1 from above altered to have a page break between renders:
Code: HTML/ASPX
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
</head>
<body>
<div style="width: 150px; height: 100px; background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">THIS IS TEST 1</div>
<div style="page-break-before:always;"></div>
<div style="width: 150px; height: 100px; background-image: -webkit-linear-gradient(top, red 0%, blue 100%);">THIS IS TEST 2</div>
</body>
</html>
The project that I am doing has renders on multiple pages and so I need this to work across all pages in the PDF output. Thanks for all your help. Todd
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi,
We have posted a new build that should fix this problem. Please see your private message for the download location.
Thanks!
|
|
Rank: Member
Groups: Member
Joined: 8/17/2012
Posts: 22
|
Hi
It seems to be working fine now.
Thanks so much for all this help.
Todd
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
You are welcome. Thank you very much for the test files and for confirming the fix!
|
|
Rank: Newbie
Groups: Member
Joined: 2/11/2015
Posts: 3
|
Recently i am designing issn barcode.I am new to use your products.Now i have some related question. Ok say the content inside the <body> totals 300px high. If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window. I am assuming this is not a bug since it is the same in both webkit and gecko. But is there a way to make the gradient stretch to fill the window instead of repeat?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,196
|
Hi andyadams,
The best option would be to increase the contents of your <body> element so that the <body> element reaches the desired height.
Thanks!
|
|