We are using Springboot 2.1.x version
PDF is being generated using HTML/CSS/ThymeLeaf
If user is entering very large text i.e. if text is larger than page of the size than doesn't appear at all, ideally it should be broken into 2 pages.
Here is the piece of code for generating the PDF Object, we are unable to identify the property which is missing, any help is much appreciated.
<table style="width: 100%;border-collapse: collapse;border-spacing: 0;" th:fragment="SingleLine(obj)">
<tr>
<td style="color: #170e0e; font-size: 11px; padding: 8px 10px 5px 0px; font-weight: 1000;width:150px;">
<b th:text="${obj.lableName}"></b>
</td>
</tr>
<tr>
<td style="padding: 0px 10px 8px 0px;color: #2c3032; font-size: 11px; padding-right: 10px;">
<span th:each="val,iterationStatus :${obj.value}">
<span style="display: inline-block;margin-right: 5px;font-size:11px;"
th:text="${#strings.defaultString(val,'-')}"></span>
</span>
</td>
</tr>
</table> ```
Related
Hi I have a asp radio button list. I need to put the drop down next to the radio button; all of them on the same row. Currently it is on the next row. Would someone help me how to fix it.
.post40
{
font-size: 11px;
text-align: right;
font-weight: bold;
padding: 2px 5px 2px 3px;
width: 40%;
}
<table id="rdList" class="rdList" border="0">
<tbody>
<tr>
<td class="post40">Attend:</td>
<td>
<input id="rdList" type="radio" name="rdList" value="1" checked="checked">
<label for="rdList_0">Yes</label>
</td>
<td>
<input id="rdList_1" type="radio" name="rdList" value="0">
<label for="rdList_1">No</label>
</td>
</tr>
</tbody>
</table>
<select name="dropNo" id="dropNo" style="position:relative; right:20px;"></select>
The <table> is a block element, so it's taking up the full width of the parent. You can set the <table> to be inline-block so it doesn't fill the width of the parent.
Once you do that, the position: relative logic of the <select> element doesn't line up. But replacing right: 20px with top: -10px seems to line it up:
.post40
{
font-size: 11px;
text-align: right;
font-weight: bold;
padding: 2px 5px 2px 3px;
width: 40%;
}
#rdList
{
display: inline-block;
}
#dropNo
{
position: relative;
top: -10px;
}
<table id="rdList" class="rdList" border="0">
<tbody>
<tr>
<td class="post40">Attend:</td>
<td>
<input id="rdList" type="radio" name="rdList" value="1" checked="checked">
<label for="rdList_0">Yes</label>
</td>
<td>
<input id="rdList_1" type="radio" name="rdList" value="0">
<label for="rdList_1">No</label>
</td>
</tr>
</tbody>
</table>
<select name="dropNo" id="dropNo"></select>
For reference, an indispensable tool for debugging your CSS is the browser's element inspector. At least in Chrome, hovering over any given inspected element highlights the styling "box" in the rendered page. And selecting the element shows you the specific styling rules applied to it, which ones over-rule which others, and how the overall styling is computed. This can help you find the actual size of your element and what styling rules are making that happen. You can also make tweaks to those styling rules directly in the inspector to test them out without modifying the underlying code.
I am having a hard time with inline styling two links that are nested inside a table. Please note this HTML is an email that is going out and I have been told that I must accomplish my styling task using inline styling. Here is the code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center"><p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color: #000; font-weight:400;"><strong>Hello:</strong></p>
<strong>Registration fee total: </strong><p>
Invoice #: </p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Pay Online using Credit or Debit Card</td>
<td>Pay Cash at YouPayMeNow!® Location</td>
</tr>
</table></td>
</tr>
</table>
Here is how the email renders (I've experimented with multiple browsers and devices and it is the same everywhere):
See how the links are smushed together without any padding/border between them? I need them spaced apart, but still centered inside the gray box they dwell inside of. And I need the blue boxes around both links to be the same size as each other, with the text horizontally- and vertically-centered inside their respective boxes. How can I accomplish this?
The table attributes you use are now deprecated - though they do still work on some browsers.
It is recommended that CSS be used instead. This snippet uses border-spacing to make a gap between the two cells with links. It also puts the background color onto the cells themselves rather than the anchor elements within them.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; border-collapse: collapse; border-radius: 1em; overflow: hidden; padding: 1.5em; background: #f6f6f6;" align="center">
<p style="margin: 0; font-size: 16px; line-height:22px; mso-height-rule: exactly; color: #000; font-weight:400;"><strong>Hello:</strong></p>
<strong>Registration fee total: </strong>
<p>
Invoice #: </p>
<table style="border-collapse: separate; border-spacing: 1em 0;">
<tr>
<td style=" background-color: #0b5584; padding: 10px; text-align: center;">Pay Online using Credit or Debit Card</td>
<td style=" background-color: #0b5584; padding: 10px; text-align: center;">Pay Cash at YouPayMeNow!® Location</td>
</tr>
</table>
</td>
</tr>
</table>
From my searching both on the wider web and on here it seems this is a question asked many many times but for the last few weeks I have not been able to find a answer that does what I want.
I am using a third party (paid for) responsive template on blogger.com.
I am creating a new page (not a post) that needs to have a html table.
The first cell of each new row will contain an image which will always be the same size.
I would like this image to be centered both vertically and horizontally, and I need the white border around the image removed.
I know basic html and some CSS but with blogger templates the css tends to be within the html (from what i can tell).
Here is my code:
<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
<br />
<table border="2" bordercolor="#0033FF" cellpadding="5" cellspacing="0" style="background-color: #99ffff; border-collapse: collapse; width: 100%;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px;">
<th width="15%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 1</span></th> <!-- COLUMN NAME 1 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 2</span></th> <!-- COLUMN NAME 2 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 3</span></th> <!-- COLUMN NAME 3 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 4</span></th> <!-- COLUMN NAME 4 -->
<th width="25%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 5</span></th> <!-- COLUMN NAME 5 -->
</tr>
<tr class="alt">
<td><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" /></div>
<br /></td>
<td>Table Cell A2</td>
<td>Table Cell A3</td>
<td>Table Cell A4</td>
<td>Table Cell A5</td>
</tr>
<tr>
<td>Table Cell B1</td>
<td>Table Cell B2</td>
<td>Table Cell B3</td>
<td>Table Cell B4</td>
<td>Table Cell B5</td>
</tr>
<tr class="alt">
<td>Table Cell C1</td>
<td>Table Cell C2</td>
<td>Table Cell C3</td>
<td>Table Cell C4</td>
<td>Table Cell C5</td>
</tr>
<tr>
<td>Table Cell D1</td>
<td>Table Cell D2</td>
<td>Table Cell D3</td>
<td>Table Cell D4</td>
<td>Table Cell D5</td>
</tr>
</tbody></table>
As a footnote to help anyone else who encounters my problem I have solved it by doing the following.
add this to the main blog css to get rid of the white border:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
and then use this to center the image:
<td align="center" valign="center"><img src="*image url*;" /></td>
hope this is of help to others
I suggest setting the cellpadding attribute to zero.
remove the <img> tags and really anything from those first cells. Then, in your stylesheet:
tr td:first-child {
padding: 0px;
background: url("http://imageshack.com/a/img661/6216/lOGXW9.jpg") no-repeat center;
}
If each cell's image should be different, you'll have to specify the background property for each of them seperately.
Find the updated JSFIDDLE CODE.
I am not able reproduce white border issue.
For making center align both vertically and horizontally.
td{ text-align: center; vertical-align: middle; }
I have a layout problem on my site..
I develop using MVC for it..
the layout will become a bit strange when I minimize it or I using smaller resolution..
my pc using 1366 x 768 resolution..
if I'm not minimize it, it will be okay..
but when I'm trying to make the browser smaller, it has a gap on the right..
I want to center it like www.bluenile.com website..
thank you..
Images:
before I minimize: http://i.imgur.com/aQyoAYH.png
after I minimize: http://i.imgur.com/9cWtl13.png
Thank you guys!
this is my layout:
<body class="body">
<table class="wrapper" style="width: 100%;">
<tr>
<td>
#Html.Partial("Header")
<table class="main" width="1000" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
align="center">
<tr>
<td colspan="3">#Html.Partial("TopMenu")
</td>
</tr>
<tr>
<td colspan="3" width="100%">#RenderBody()
</td>
</tr>
<tr>
<td class="sidepadding">
</td>
<td>#Html.Partial("ResourcesCentre")
</td>
<td class="sidepadding">
</td>
</tr>
<tr>
<td class="sidepadding">
</td>
<td>#Html.Partial("Networks")
</td>
<td class="sidepadding">
</td>
</tr>
</table>
<table width="1015" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
align="center">
<tr>
<td style="width: 5px; height: 1px;">
</td>
<td>#Html.Partial("Footer")
</td>
<td style="width: 5px; height: 1px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
this is my style:
.body
{
background-image: url('/Content/images/Diamond_Background_Blue.png');
font-size: 0.75em;
font-family: "Gotham Book", "Gotham Bold", "Gotham Light", "Gotham Thin", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
.wrapper
{
margin: 0 auto 0 auto;
}
UPDATE:
After I check my css, there is a css code on navigation that make it run: position: relative.. I remove that code and now the layout okay already..
Thanks guys for your help.. :)
The trick to centering an element is to give it a width and left right margins of auto. E.g. margin: 0 auto. For more help, post an example of your code.
In your CSS just add this line on your page ,containers, wrappers etc.
{
margin:0 auto;
}
Here's a reference, How to Center a Website With CSS. If you want to test it to different screen resolution you could test it here. Hope this helps you. :)
Add margin: 0 auto to body and give it a width: 80% or something. And to make your page fluid, use width in % and not px
DEMO
I have a php email that is received by our company's email client, microsoft outlook. I also get a copy in my gmail. Everything looks fine in gmail:
This php / html:
$remainder = <<<EOD
<tr>
<td colspan='2' style='font-size:12pt; padding:5px 0px 5px 3px; background-color:#F7F7F7;'>
Product details
</td>
</td>
<tr>
<td style="width:150px;font-size:10pt; padding:10px 8px 0px 3px;" align="left">
Product type:
</td>
<td style='font-size:10pt; padding:10px 0px 0px 0px;'>
{$product}
</td>
</tr>
<tr>
<td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
Quantity:
</td>
<td style='font-size:10pt; padding:10px 0px 0px 0px;'>
{$qty}
</td>
</tr>
<tr>
<td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
Product size:
</td>
<td style='font-size:10pt; padding:10px 0px 0px 0px;'>
{$productSize}
</td>
</tr>
<tr>
<td style='width:150px;font-size:10pt; padding:30px 8px 0px 3px;' align="left">
Account executive:
</td>
<td style='font-size:10pt; padding:30px 0px 0px 0px;'>
{$accountExec}
</td>
</tr>
produces something that looks like this in gmail: (minus the part at the top i didn't crop)
However, in microsoft outlook, I get something that looks like this (with much inflated padding.
I can see by looking at the elements in the browser (when I forward the element back to gmail from msOutlook) that several different elements are being added. Why would this happen? Is there anyway to prevent it?
How could I make this so it looks right in both?
Thanks!
I suggest wrapping the content of every table cell in a div and give the padding to that div and not the td