I have a page written in HTML/ASP that has a series of nested tables that I use for formatting the page the way I want it.
When the page loads however there is a white space between the two tables that is not in the code and when I inspect it in chrome it shows the code has a   character between them.
Why is this appearing in the page when it loads but it is not in the script? How can I remove it?
<table width=100% border=2 cellpadding=0>
<tr>
<table width=100%>
<tr>
<th width=10% align="right">Destination:</th>
<td width=60%>Here</td>
<td width=10% align="right">Date:</td>
<td width=20% align="left"> <%=FormatDateTime(d,2)%></td>
</tr>
</table>
</tr>
<tr>
<table width = 100%>
<tr>
<td width=2%> </td>
<td align="right">Time1:</td>
<td align="center"><%=formatTime(oRS1("time"))%></td>
<td><%=oRS1("location")%></td>
<td width=40> </td>
<td align="right">Driver</td>
<td> <%=fpn%></td>
</tr>
<tr>
</table>
I just had this same issue and here are the steps that I tried that eventually fixed it:
Cleared the cache in the browser
Cleared all browser data
Tried a different browser
None of the above worked in my case, and the phantom was not in my code (and I triple checked it!!!!), but it was obviously somewhere since it was showing in the console and other browsers:
So, (and this may not be the best way to solve this but it worked) as you can see from my console output, I added two paragraph tags above and two below (by carefully putting the cursor in front of the next element and using a carriage return and the arrow key to go back up) to get the phantom in the middle. After that I saved it, then proceeded to select and delete the two paragraph tags in the middle together (with the phantom between them). This is what finally worked, the delete of both the elements surrounding it together took the phantom with it...
Perhaps some small part of my html page became corrupted? Who knows... but if anyone else is having this issue, give this a try.
Related
I have a very complex dynamic table that I need to output to pdf in laravel 5.6. The project I inherited had Dompdf installed and is already rendering all other content. Therefore, I use it as well for compatibility.
My issue is I have a table to render consisting of 13 columns and undefined number of rows, where intermittently a column may span 13 columns for a heading or a row may span several rows at any given time or a colspan within the rowspan that spans 11 columns from the 3rd row. No html is hardcoded except the <table>, <thead>, <th> and <tbody> tags. The html within the tbody tag is dynamically generated depending on the array data.
Everything looks great in the browser and when I view() the pdf blade as well as ctrl + p it creates a nice pdf, although for some reason rowspan cells spanning to the next page does not carry over markup and content. As soon as I try to stream() the pdf the table becomes warped and looks like a toppled building built by Picasso.
Here is links to pdf's, the one I ctrl + p lost its colour due to me removing names.
File to view pdf printed with ctrl + p
Pdf streamed with Dompdf
Image of viewing pdf in browser
Image of pdf when streaming via Dompdf:
Html sample rendered in browser:
<tr style="background-color: #5b8969;">
<td rowspan="2" style="background-color: #F8C293; color: black;">Spray 4</td>
<td>Pollinate</td>
<td>7-10 days later</td>
<td>BENOMYL WP 25KG </td>
<td>benomyl 500g/kg</td>
<td> </td>
<td>1000</td>
<td>2.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Full bloom</td>
<td>Black Spot</td>
<td>WETCIT DUO 20L </td>
<td>borax 10g/orange oil 50g/l</td>
<td> </td>
<td>1000</td>
<td>25.00</td>
<td>100.0000</td>
<td>120.0000L</td>
<td>2500.0000</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="13" style="background-color: #9fb5d3;" class="h3 font-weight-bold">ANOTHER ONE</td>
</tr>
<tr>
<td rowspan="7" style="background-color: #F8C293; color: black;">Spray 7</td>
<td>20 cm</td>
<td>African Armyworm</td>
<td>CERATO 250 EC 5L </td>
<td>pyraclostrobin 250g/l</td>
<td> </td>
<td>1000</td>
<td>2.00</td>
<td>10.0000</td>
<td></td>
<td>20.0000</td>
<td></td>
<td></td>
</tr>
Can someone please help and give me a clue on how to output such a complex table with Dompdf? As I would really want to keep on using only one PDF rendering library in this project.
Otherwise I am open to suggestions to use another pdf library that can handle rowspan that span pages and this complex layout?
Update
Based on a comment by Don't panic (he suggested validating html and fill empty td tags with ), that he subsequently deleted.
I re-wrote the HTML as a template into my pdf.blade.php view. Now, I only output the values in a loop in my view. Firstly, it becomes easier to maintain and to leave off the validation he suggested. I also filled every empty <td> tag with a hardcoded ' '. This is to more easily see why certain rows end where they should and others not. The result is sadly still the same, a warped table. But it does seem to be a rowspan issue not colspan. The 'rowspan' rows stack after another. So maybe missing a td tr.
Solved rowspan stacking issue
Two weeks of testing and only problem was it was not outputting certain rows' opening tags, which lead to rows not knowing when to begin. Now only problem left is rowspan across pages.
Update on update
So I have really tried everything I can to get DomPdf to do what it is suppose to do, which is rendering pdf's. I have read a bit more and found that this library has a long standing issue of not being able to render rowspan accross pages. Therefore, on to the next rendering library wkhtlmpdf or I could logically divide rowspans to stop at end of page and start again on new page. Will have to check my watch on this one.
I'm working on some email that will be deployed via Exact Target. We have a lot of AMPScript dictating what is going on within the email(s). The content blocks of the email are dynamically filled, and when a field is left empty there is still a call made to that table section, which then inserts a blank space on the email. Thus throwing the design out of whack.
My question is, is there anyway I can have those empty cells completely removed from the page when not in use?
here is the code sample ...
Set #SendLog_blockC1 = lookup("RaceDataSendLog","BLK_C1","SubID",#SubLookup,"JobID",#JobLookup,"BatchID",#BatchLookup)
...
...
...
Set #blockC1 = Concat("My Contents\Newsletter\",#SendLog_blockC1)
....
....
....
....
%%[IF empty(#blockC1) THEN]%%
%%[ELSE]%%
<tr>
<td align="left" valign="top" >
%%=ContentAreaByName(#blockC1,"",0)=%%
</td>
</tr>
%%[ENDIF]%%
Thank you in advance.
On the assumption you're referring to that space above your ELSE - this should work:
<!--%%[
IF empty(#blockC1) THEN
ELSE]%%-->
<tr>
<td align="left" valign="top" >
%%=ContentAreaByName(#blockC1,"",0)=%%
</td>
</tr>
<!--%%[ENDIF]%%-->
This will hide the AMPscript in the HTML, in addition - you don't really need the IF to produce the space, you can just have the ELSE right after it.
and thank you for your responses. I was finally able to resolve the issue of the extra spacing.
What I did was remove the <tr> and <td> tags from around the if/else statements. I then placed those <tr> and <td> tags around the content blocks that are brought in by the PM's when they decide which blocks to use. This solved the problem of the extra spacing. Client is happy!!!
Thanks again guys!!!
I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.
I'm using tables with this report, and my problem is that when I use page-break at the bottom of a page to avoid the last row being cut off, the next elements starts at the middle of the next page.
Here is my code:
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
</tr>
<tr style="page-break-after: always;"><td colspan="4"></td></tr>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
<td class="4"></td>
</tr>
please see screenshot:
i think you might be using loop to print your report,
always use <br> *<hr>* or page-break-after outside the loop..
inspect the element from browser, you will get the error msg if any, and you can solve them..
I have two tables:
<h3>JVM Garbage Collector</h3>
<table style="width:100%" border="1">
<tr><th>Name</th><th>Description</th><th>Type</th><th>Key</th></tr>
<tr>
<td style="width:25%">PS Scavenge collections</td>
<td style="width:33%">Number of garbage collections by the PS Scavenge collector.</td>
<td style="width:12%">JMX</td>
<td style="width:30%">Object: java.lang:type=GarbageCollector,name=PSScavenge<br/>Attribute: CollectionCount</td>
</tr>
</table>
<h3>JVM Memory Pool</h3>
<table style="width:100%" border="1">
<tr><th>Name</th><th>Description</th><th>Type</th><th>Key</th></tr>
<tr>
<td style="width:25%">Code Cache committed</td>
<td style="width:33%">Committed bytes of the Code Cache memory pool. This is included with HotSpot JVMs, which contains memory used for compilation and storage of native code. It is part of non-heap memory.</td>
<td style="width:12%">JMX</td>
<td style="width:30%">Object: java.lang:type=MemoryPool,name=Code Cache<br/>Attribute: Usage.committed</td>
</tr>
The first one is behaving correctly, but the second one is not sizing according to my widths and I am guessing it's because of the text content within.
Apply the css word-break:break-all to all TD you want to break that way.
See jsfiddle
This is a CSS3 property so it probably won't work on IE6 and 7.
Use css word wrap property at all places. It will break the line if it crosses the specified width.
For more just make a search on net.