I am trying to ease a common workflow of our users by giving them the opportunity to copy information from our app to the clipboard and paste it into Bloomberg chat. Since some of the content is tabular, I use the text/html mime type to format it as follows:
<div>
<span>some raw text<span>
<table>
<thead>...
<tbody>...
</table>
<div>
When pasting the resulting clipboard content into Word, Skype, or other rich text enabled targets, it works as expected. However, when pasting to Bloomberg terminal/chat, only the table is pasted while the text above is cropped.
How do I get the whole content to be pasted?
I found a workaround: since the BB input field seems to parse only tables and ignore the rest of the html document, we added the text as part of the table's header.
<table>
<thead>
<tr>
<td colspan="2">The text I want to appear "before" the table</td>
</tr>
<tr>
<td colspan="2">(manually break lines to avoid cut-off)</td>
</tr>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>...
</table>
Not great as text might be cropped depending on the number and width of columns and the rendering is not great. Happy to see better ideas :)
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.
Here are my HTML test codes using Google HTML/CSS guide.
<table>
<thead>
<tr>
<th>Date
<th>Country
<tbody>
<tr>
<td>24/07/2018
<td>Myanmar
<tr>
<td>31/06/2018
<td>France
</table>
The following is how browser interprets it.
<table>
<thead>
<tr>
<th>Date
</th>
<th>Country
</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/07/2018
</td>
<td>Myanmar
</td>
</tr>
<tr>
<td>31/06/2018
</td>
<td>France
</td>
</tr>
</tbody>
</table>
Here is my questions.
How the browser detect the lack of closing tag and how they interprets it.
It is preferable to use without closing elements? If it is, when should I use?
If it is not preferable, why?
Will it be impact on styling and adding interactivity on HTML semantic style?
Answers:
This is beyond the scope of SO, but just like any compiler detects something that opened is not closed. You can try and program something that identifies a valid bracket series, it would probably be similar.
Not using closing elements may break your page beyond being horribly un-maintainable. Always use closing elements.
See 2.
See 2.
Browsers sometimes can guess what you meant (better say, they parse luckily in a way that produces what you meant), but might also be wrong. See this:
<div>Hello<span>world
is this:
<div>Hello</div><span>world></span>
or
<div>Hello<span>world></span></div>
both are valid, and the browser has no idea which you meant. If you really want to get into how browsers are supposed to parse HTML, see this great link by
#modu and #kalido: http://w3c.github.io/html/syntax.html#tokenization . You may be able to workout how a browser should parse the above line.
As far as I know, Crystal report has a lot of limitation on interpreting HTML tags. I have also seen the supported tags list provided here. However, I have tr and td tags and I cannot avoid using it.
Is there anything I can do in between the HTML and Crystal Report so that table can be created?
Sample Data
<p>Your tenses are a bit confused here.
For next piece of writing, write everything in past tense. Set all your
story with “Last Sunday” to get used to recounting in past
tense first.</p>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
<tbody>
<tr>
<td>look</td>
<td>looked</td>
</tr>
<tr>
<td>cook</td>
<td>cooked</td>
</tr>
<tr>
<td>bless</td>
<td>blessed</td>
</tr>
</tbody>
</table>
<p> </p>
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.
I have a table in which I need to add another cell per column, and since that column will have a lot of elements on it, the cell content must flow below the other cells in the same row, filling all the available width on the table. This way the columns won't be stretched making it impossible to view its content.
A visual example might help: http://www.asciiflow.com/#Draw9009157520507047228
Edit
After reading all the replies I realize that perhaps I didn't provide enough information. My apologies.
The table I want to modify is the one in http://staging.locamotion.org/projects/pootle/ . Note that this table uses the sorttable JavaScript library for sorting the table.
I have to modify that table to display tagging information for each of the entries. Since every entry can have several tags which can span a lot of space, the new column (necessary to keep working the sorting library) must flow below the other columns to allow showing the tagging stuff which can span to one or more lines due to width constraints (have in mind that this program is used on third world countries will old equipment and low resolution screens).
Someone asked what I've tried. I tried adding an additional row per each entry, which only one cell with colspan attribute, but that way the sorting library doesn't work:
<table class="sortable">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="even">
<td colspan="4">First entry tagging stuff</td>
</tr>
<tr class="odd">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="odd">
<td colspan="4">Second entry tagging stuff</td>
</tr>
<!-- More and more entries -->
</tbody>
</table>
If you have any other idea on how this UI can be achieved while keeping column ordering I would appreciate it.
I want to apologize again, and also thank the people who spent some of their time trying to answer and help me the best they could.
Tables cells are ALWAYS rectangles and cannot "flow" as described in your image.
You would need to nest a table in a DIV and use CSS floats to accomplish what you're looking for.
I don't think that's possible in HTML.
You could create a Div with a left-floated table in it that contains the two cells, and then have the third cell's content as the content of the div (after the table).
<div>
<table><tr><td>First</td><td>Second</td></tr></table>
Third with a lot of content that might actually span under the table but it's not part of the table
</div>
Like so: http://jsfiddle.net/9QS44/
You can merge the cells from 2 rows using rowspan and similarly for the columns using colspan. You can also combine both the rowspan and colspan. Not sure if you will be able to achieve the effect you're trying to get, but this is the only way I know that will get you close. This should also help you out. http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
I agree with previous posters that HTML table cells do not exactly work the way you are wanting. Here's another way to skin the cat:
<style type="text/css" media="screen">
table {
border-collapse:collapse;
border:1px solid #FF0000;
}
table td{
border:1px solid #FF0000;
}
table#child {
width:200px; float:left;
}
table#parent {
width:300px;
}
</style>
<table id="parent">
<tr>
<td>
<table id="child">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>Text that<br />wraps<br /> and wraps.
</td>
</tr>
</table>
Might want to reduce the amount of bottom margin on the child table as well so that the text wraps a little bit closer.
If it were me, I'd explore using divs for this particular need and forget about tables altogether.