HTML output not being displayed correctly in JEditorPane - java

I have two tables that are supposed to be side by side on the same line.
One table ("stableTable") is always on the right side of the viewable area, and the other table ("movingTable") can be modified to have its align be left, center or right.
Here's the HTML Code
<html>
<head>
<!--Test Header-->
<style>
body {display: inline; width: auto;}
table {width: auto;}
table, th, tr, td {border: 1px solid;}
</style>
</head>
<body>
<table class="stableTable" align="right">
<tr>
<td>
WORLD
</td>
</tr>
</table>
<table class="movingTable" align="right">
<tr>
<td>
HELLO
</td>
</tr>
</table>
</body>
</html>
When I put this in an HTML file and open the browser it shows up correctly as seen below (both side by side):
But here's the output when I put this same HTML code in a JEditorPane (one is on top of the other):
I'm stumped on this one as I have tried different things in an HTML file that appears correct when I open it up on a browser, but it doesn't in the Java JEditorPane.
Any thoughts?
EDIT:
After looking online a little, it appears that Java has a poor track record for rendering HTML and CSS correctly. I found an article that mentioned downloading flyingsaucer jar file (I ended up downloading the flying-saucer-core-9.0.4.jar version) and it appears to render the HTML side by side as I wanted.
Now my only task is to get it to work within the existing maven project I'm working in with the actual tables.

I believe the issue here is with the JEditorPane itself and that it (and Java itself) has a poor track record of rendering HTML/CSS.
I have found that using flying saucer 3rd party app is the way to go. I have tested with that and it does render the HTML as I want.
Here's the link to the specific flying saucer version that I used https://mvnrepository.com/artifact/org.xhtmlrenderer/flying-saucer-core/9.0.4

Related

How to submit a form using Java HttpURLConnection when button is image

I am trying to write a program in Java using only the java.net.* libraries (i.e. HttpURLConnection, URL...) - this is a requirement for this project (i.e. no external packages like HttpClient, JSoup, etc...). The ultimate form submission 'Go button' is actually a picture that the user clicks. It's code snippet is here:
<script>
var form = $('pdb');
function proceed() {
form.submit();
}
</script>
<div id=input_nav>
<table class="nav_entry" onclick="proceed();" align=right>
<tr>
<td align="right">Next Step:<br/>Select Model/Chain</td>
<td align="right">Next Step:<br/>Select Model/Chain</td>
<td width="51" align="left"><img src="images/basic/next.png"></td>
</tr>
</table>
</div>
To my understanding, form submission using Java's .net library requires sending the HTML' code's gui object name-value pairs, but as can be seen from the HTML source code snippet, no such fields exist foe the button. Could someone please give me some direction with how this job can be accomplished?

Wrong rendering while generating pdf from html in Java

I'm trying to convert simple html to pdf but the styling in my browser is different than the one in pdf. I'm using flying-saucer-pdf v9.1.18. Do you have any idea why?
here is how it looks on web browser and how it looks in the generated pdf:
https://i.stack.imgur.com/MB7DB.jpg
Here is my simple html template:
<html>
<head>
<style>
.aligned {
vertical-align: bottom;
}
.colored {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1" width="300px" height="300px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td class="colored">4</td>
</tr>
<tr>
<td>5</td>
<td class="aligned">6</td>
</tr>
</table>
</body>
</html>
From docs:
No support for legacy or "street" HTML, although there are several
open source Java HTML cleaners of varying quality available. We render
well-formed XML; XHTML is a well-formed XML document which uses a
special set of tags. We can't render most HTML "in the wild". At best,
you can "clean up" old HTML with TagSoup or JTidy or similar library
and hope for the best. But without a bunch of work, you won't be able
to use Flying Saucer for a real web browser component. However, note
that's not a technical limitation, just a lack of time and resources.
The "height" attribute of TABLE tag is standard at all, I guess flying-saucer is ignoring it.
See e.g. Setting the height of a table in HTML has no effect

Why is Google Chrome not printing table and cell borders, and cell background colors?

I'm maintaining a Web Application created using GWT, and which historically was developed to work only in Google Chrome.
There are several "reports" that can be extracted from the system. The way this is implemented is as follows: first, the html for the report is created and displayed in a section of the screen (this works correctly). After that, there is a button which allows to print the report. This action generates the html with the information (in a html table) the same way it would to create the on-screen report, and uses it to create a html file that is then sent to print.
This is where the monster shows its face! (tum-dum-dummmm - dramatic music).
Since Google Chrome updated to verssion 59.0.3071.86, when printing, the table/cells lose their borders, and background colors.
I thought maybe it had comething to do with the generated html, but in fact if I force the html upon printing to be
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;}</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
the table still does not get printed correctly (and this is seen also in the Chrome's print preview (yes, even with the option to print background images selected)). The same thing happens if I style the table upon the table's tag itself. Something like:
<table style="border: 1px solid black !important;">
I'm out of ideas, so I'm asking if anybody got into a similar issue, or has any idea about what can I try.
Thanks in advance.
And edit to say that this is not the same problem as the one in the "possible duplicates". I had the "background colors" problem in the past, and I've fixed it. In this case (and as the code-snippet shows) it seems some styles are not interpreted, like for instance the table border. And everything was working prior to chrome 59.0.3071.86, so it seems to be a new issue, not a "solved somewhere in a 5 years' span" one.
And yet another edit to explain a little further:
somewhere in my webapp, there's a little button that reads "print report". This generates an html file which is then sent to print.
I replaced the generated html with a rather simplistic one that ilustrates my problem.
So, everytime I press "Print Report", I "force" this to be the generated html:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Notice how I use the
body { -webkit-print-color-adjust: exact; }
Also, I tried some variations like styling the table as:
<table style="border: 1px solid black !important;">
Or the body as
<body style="-webkit-print-color-adjust: exact;">
I'll just add an image from an "html testbed" to show how my omnipresent html should display:
However, when the print preview "pops", this is what I get:
So, neither does the backgound color displays (as I believe happens to other SO users, but with their solution not working here) nor the table borders.
Other edit: I tried defining "print-specific css rules", as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
body { -webkit-print-color-adjust: exact; }
table, th, td {border: 1px solid black !important;}
}
</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor=\"#FF0000\">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
but I get the same results as before. Also (and maybe this is relevant... and maybe it isn't) if I define, for instance, a table width, THAT styling is correctly displayed upon printing, whilst the table borders are still hidden/not present/magically removed (chose one).
FINAL EDIT - workaround:
I was not able to solve the problem per se, and I really REALLY do not understand why it happens.
What I was able to do was get a workaround working, and I'm posting it here not as an answer, but still hopping it could help somebody:
The way I did it was: when I pressed the print button, I open a new window having only the html that I want to print (exactly as I want it printed), and using javascript I make it print after the page is loaded.
This way it works, and it prints with the correct formatting.
Some might say it is luck, others "black magic". I say "Done! Next!" (altough I'm not happy with the fact I don't understand the problem in the first place).
Have you tried the style directly inside the table tag?
<table border="1px" bgcolor="green">
<tr>
<td>ANYTHING RANDOM
</td>
</tr>
</table>
D.
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="green">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
/* you can add the table border with size 1 or your wish . In HTML table border tag helps to add this feature to the web application.*/
Others experiencing the same issue were able to resolve with "border: thin solid #000;", where the border thickness was expressed as "thin" rather than "1px".

Using embedded CSS in Mail

I am Generating and sending Mailer using Servlet by replacing placeholders in Mail Template.Can I Use embedded style in Email for Styling as Below instead of inline styling
I am using a Newsletter email which has three place holder for Header Image, Email Body and Email Footer.Now the problem is since the Header Image is with in a anchor tag I am getting a border around the Image.
Is it Possible to get rid of the border by using embedded css
Is there any alternate solution for this problem since the whole ###HEADER_IMAGE### is replaced by Image tag rather than Just image source.
The HTML code is as below.
<html>
<style>
a img
{
border-style : none;
}
</style>
<table width="590">
<tr>
<td colspan="2">
<a href="#" target="_blank">
###HEADER_IMAGE###
</a>
</td>
</tr>
</table>
<div>
###EMAIL_BODY###
</div>
<div>
###EMAIL_FOOTER###
</div>
</html>
Thanks for Reply

Grails rendering plugin css issue

I've just installed grails rendering plugin and would like to use it for generating PDF files. I've created simple template, but it is exported without any css styles. If I simply render template from grails, then page appears with all styles in my web browser.
So, my question is - how to correctly include CSS file during PDF generation process?
My template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'webui.css')}" />
<r:layoutResources/>
<title>Report</title>
</head>
<body>
<div id="content">
<div id="center-container">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<table>
<thead>
<tr>
<th class="trip">trip</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
${tip}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
And I have style .odd in my webui.css, but it is not applied on the row.
Any help would be appreciated.
Edit1: I found out that styles are fetched, if I do it in the following way:
<link rel="stylesheet" href="my_appname${resource(dir:'css',file:'main.css')}" />
But I don't want to hardcode application name (this is also a base context path). Is there a better way to generate proper link to a css file?
It may be late with my answer but I wanted to share my experience here with rendering pdf in grails. I followed the below steps and failed over to the next until I get a pdf:
Used the resource plugin in the template gsp to grab a module where css was bundled.
For example:
Test.gsp
<html>
<head>
<r:require modules="bootstapApp"/>
<r:layoutResources/>
</head>
<body>
....
<r:layoutResources/>
</body>
</html>
The above worked fine but the styles were not used in the pdf after rendering. I had to fall over to step 2.
2.Started using tag as mentioned above in the problem statement.
Result: No change. I wasn't able to get the styles in the pdf.
Failed over to step 3
3.Added the styles inline in the template gsp. And then I was able to apply them to the pdf. Point to note here is that if you follow step 3 and you have css like bootstrap.css then inlining them in the template will be cumbersome. Even if we add them, do not forget to put them inside the media tag. For me the below worked perfectly fine:
<style type="text/css">
#media all {
//CSS styles goes here
}
</style>
Try setting grails.serverURL in Config.groovy to the app url (ex. grails.serverURL=http://localhost:8080/appname). The plugin resolves all relative links via this setting
I shared my answer elsewhere, but I ended up just embedding the external file contents into the gsp for pdf rendering:
https://stackoverflow.com/a/32767378/1599616

Categories