I'm working with Jasperrerports 3.5.1 and I have a html-styled text that I need to be printed in a PDF with the proper styles.
In the cell I want to print the styled text I have the markup property set to "HTML". I have created a this sample text:
<p>
<table border="0">
<tbody>
<tr>
<td>wewewe</td>
<td>eeeee</td>
</tr>
<tr>
<td>qwewewq</td>
<td>3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
but in the PDF it is printed as if, without any formatting.
Do you know how can I use html styles here, because using tables inside cells are one of the client's requeriments.
Thanks.
I know this question is old, but JasperReports only supports a small, very small set of HTML tags for styling. The list I found of those tags is:
b
br
font
u
i
sup
sub
li
See here for more info.
First, I'm not sure if case matters but make sure the value of the markup attribute for your textElement element in your JRXML is set to "html" (lowercase).
Second, the purpose of the markup attribute is to format text using HTML, it is meant to make text bold, italic, change font color or size, etc. Creating a table is not what this attribute is for.
You can create tables using standard JRXML, without resorting to embedding HTML, an example is bundled with the JasperReports download under ${JASPERREPORTS_HOME}/demo/samples/table
You can do something like
<textField >
<reportElement x="7" y="10" width="543" height="53"/>
<textElement markup="html">
<font size="10" pdfFontName="Helvetica" isPdfEmbedded="true"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$F{myElementName}]]></textFieldExpression>
</textField>
Then you can pass the following string programatically
<p style="color:red">
<table border="0">
<tbody>
<tr>
<td style="border: 1px solid">wewewe</td>
<td style="border: 1px solid">eeeee</td>
</tr>
<tr>
<td style="border: 1px solid" >qwewewq</td>
<td style="border: 1px solid">3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
I haven't found yet how to create css to apply it using classes inside a jasperreport text element.
Related
I am trying to verify that a specific image exists on a webpage in a specific element. The image:
Has no unique id
Has no unique alt
The src attribute contains a query string I am trying to ignore
Appears multiple times on the page
I can't use Page Should Contain Image because it appears multiple times but I need to verify it appears in a specific table cell. The image src looks like this:
${BaseUrl}/status_submitted.png?master_2017217_17-29
Here's the HTML surrounding the image:
<table id="mass_list" class="grid">
<tr>
<th class="shrink align_center">Status</th>
<th>Action</th>
<th class="shrink align_right">Submitted</th>
<th class="shrink">Submitted By</th>
</tr>
<tr>
<td>
<img src="https://{baseurl}/images/status_submitted.png?master_2017217_17-29" alt="Submitted" width="70" height="20" />
</td>
<td class="nowrap">
Automation Test 1488321180.7
<br />
<small class="mute">
<strong>0</strong> of <strong>2</strong> records processed
</small>
</td>
<td class="nowrap align_right">Yesterday at 4:33 PM</td>
<td class="nowrap">Tina Tester</td>
</tr>
<tr>
<td>
<img src="https://{baseurl}/images/status_submitted.png?master_2017217_17-29" alt="Submitted" width="70" height="20" />
</td>
<td class="nowrap">
Add an attribute
<br />
<small class="mute">
<strong>0</strong> of <strong>16</strong> records processed
</small>
</td>
<td class="nowrap align_right">Yesterday at 8:06 AM</td>
<td class="nowrap">Tina Tester</td>
</tr>
I need to verify that just ${BaseUrl}/status_submitted.png exists on the page within a specific table cell or xpath location. How do I do this?
Given the example document this was a rather straight forward excersise for me using nothing more than Google Chrome itself. Put the contents of the example in a file with HTML/Body tags around it and then use the right-click inspect to inspect the element in the console. Right click again on the source tag and choose Copy>Xpath.
This will result in the following xPath: //*[#id="mass_list"]/tbody/tr[2]/td[1]/img where the first number tr[2]is the row, and the second number td[1] is the column.
A second approach is to look at the image tag itself and filter based on the file path location of the images with that src attribute: //img[contains(#src, "status_submitted.png")]
I have many links in my page.One with text "Add policyhoder" ,one with text " Add" only and another "Add PP". I need to click link by text .I am using below code to click link having text as "Add" only but it is clicking very first link having "Add" in its text i.e. ""Add PP" available on screen.Please can u help
Driver.findElement(By.linkText("Add"));
My requirement is to click a link with exact text match . for example "Add" here
<td width="100%" colspan="7">
<table width="100%" cellspacing="0" cellpadding="1" valign="bottom">
<input id="hidPoClaim" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value=" PolicySummary " callfunction="" size="" name="/Root/ACORD/InsuranceSvcRs/com.c_HomePolicyInquiryRs/co.cc_AvailableFunctions[com._FunctionName='PoSummary' and com.csc_FunctionName[#Action='ShowPolicyClaims']]">
<tbody>
<tr>
<td width="25%" valign="bottom" colspan="1">
<strong>
<font class="flabel">Policy Claims History:</font>
</strong>
</td>
<td width="20%" valign="bottom" colspan="1">
<font class="flabel"> </font>
<a class="fLabel" onclick="INFCaptureControlID(this); DoLink('POLICYLOSS','','ADD' );return false; " onblur="ResetScript(this);return true;" onfocus="HighlightScript(this);" delimiter="|" screenaction="ADD" href="" screen="Y" objecttype="POLICYLOSS" type="Link" context="Screen">**Add**</a>
</td>
<td width="20%" valign="bottom" colspan="1">
<td align="Center" width="15%" valign="bottom" colspan="1">
<td width="20%" colspan="1">
</tr>
</tbody>
</table
Thanks
Dev
If it the there are 2 elements with the word "Add", Then try something like this:
List<WebElement> list = driver.findElements(By.linkText("Add"));
list.get(1).click();
To find the element by searching for the exact text, then using xpath will be more helpful.
// For "Add" link, according to the HTML you've added to the question
driver.findElement(By.xpath("//a[text()='**Add**']")).click();
I assume because when you click on first link it opens that link page in same tab and can not find second link element as page changed , so you have to open that link page in new tab in.
I think your code would be :
String Newtab = Keys.chord(Keys.CONTROL,Keys.RETURN);
driver.findElement(By.linkText("Add policyhoder")).sendKeys(Newtab);
driver.findElement(By.linkText("Add")).click();
Now above code will work for you.
you can try using
driver.findElement(By.xpath("//a[text()='Add']"));
This would match exact text for you
So I've battled against an HTML email and including Outlook support for some time now. Within the code below Gmail and Outlook both display the <td> at 15px in height. Why? Its only meant to be a cross client hr replacement for a dotted separator line.
<!-- Dotted Horizontal border Outlook Optimized-->
<table style="width:100%;border-bottom:1px dotted #999999;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody align="center" border="0" cellpadding="0" cellspacing="0">
<tr align="center" border="0" cellpadding="0" cellspacing="0">
<td style="background:none;height:1px;width:100%;vertical-align:middle;" border="0" cellpadding="0" cellspacing="0" ></td>
</tr>
</tbody>
</table>
UPDATE:
So its because there is an "empty" cell. I thought that an would take care of it but more was needed. I also tried putting the 1px image inside the cell as mentioned by #Vitorino Fernandes, the height persisted.
The nbsp does in fact need to exist for several email clients and the use of line-height:0px; finally flattened the cell.
as per looking at your code i understand that you are using table to give border -- dont use table because empty table will give some space use td instead and spacer image with height 1px(ad per your border height) and give bg-color to td
or if you want to use the same layout
add a spacer image in the empty td with height 1px and background color- as per your border and give line-height:1px to the parent tr
Here is a sample: JsFiddle
I have a table with 3 columns. Each should have 500px. But my table is resized to fit within the parent div (600px).
The width of my table should be 1500 (3x500) and a scrollbar should be displayed in parent div. How can I resolve this without adding a "width=XXX"?
<div id="container">
<table id="table">
<colgroup>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Apply min-width to the table tag (it doesn't work on col as explained in my comment on the OP).
Updated CSS:
#table {
table-layout:fixed;
margin:3px;
border-collapse:collapse;
min-width: 1500px;
}
Tested in Chrome and Firefox, and should be widely supported (according to caniuse).
Edit I've realised this answer doesn't actually answer your question, as it works around the col tag problem rather than solving it. I hope it helps anyway though.
Sending out mass emails, pretty much the whole thing is inside tables.
CSS affecting the table:
.title {
vertical-align: top;
}
HTML:
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>
</td>
<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>
<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>
I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.
I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.
Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.
this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>
...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.
The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.
Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.
Many thanks to everyone who contributed here!
Ros' suggestion suffices most of the time, but Gmail removes your header styles which leaves the inserted p tags with gmail's default margin top and bottom.
An alternative to get around this is by adding a div tag within your multiline tag. This will successfully prevent Campaign Monitor from wrapping your content with a p tag.
Here is a structure example:
<multiline>
<div>
Your Content Goes Here.
</div>
</multiline>
Put
valign="top"
on your TD for the text. If the email client doesn't recognize CSS it should recognize the standard HTML attribute.
Also, if that doesn't fix it, can you edit your Q and add the definition for "title" CSS definition that you are using on that .
I'm assuming your referring to the text inside the H2 tag.
Create a class for the <h2>
.noPad {
padding-top: 0px;
}
Or don't use the H2 and just use a span or div element.
It could just be the line-height of the text as opposed to margin/padding - check that as well