How can I stop the heading row on a fancytree table from scrolling - allowing only the data rows to scroll?
Here's the HTML I'm using.
<div id="scrollParent_history" style="height: 420px; overflow: auto;">
<table id="lb_tree_bliss_history" class="lb_report_tree">
<colgroup>
<col width="175px">
<col width="20px">
<col width="20px">
<col width="20px">
<col width="20px">
<col width="20px">
<col width="20px">
</colgroup>
<thead>
<tr> <th>Date</th> <th>First</th> <th>max</th> <th>Min</th> <th>Final</th> <th>Activities</th> <th>Change</th> </tr>
</thead>
<tbody></tbody>
</table>
</div>
Fancytree does not do anything special with the table headers, so you can probably use any existing jQuery fixed table header plugin.
(Note: it may be worth it to check the project page every know and then, since this functionality may become a native Fancytrtree extension some time.)
In case it helps anyone I'm using floatThead which works nicely with fancytree 2.21.0. Available on GitHub http://mkoryak.github.io/floatThead/
Add the JavaScript library, then it's a one-liner
$('table').floatThead({
position: 'auto'
});
Related
For some reason, TinyMCE is allowing an invalid attribute from Google Sheets.
Here is an example:
<tr style="height: 21px;">
<td data-sheets-hyperlink="link" data-sheets-formula="link">Foo</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Bar</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Foo</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Bar</td>
<td data-sheets-hyperlink="link" data-sheets-formula="link">Foo</td>
</tr>
I already tried to set data-sheets-hyperlink and data-sheets-formula as invalid attributes using valid_elements and invalid_elements, but TinyMCE still allows it.
Any idea on how to remove these attributes as they are not useful and can be an issue for big tables?
Thanks.
It seems that TinyMCE is not removing data-* attributes
Try this fiddle with [TinyMCE][1] configured to parse as full XHTML and fill it's source code with:
<a dir="" style="color: red;" href="https://google.com" data-v-test="">TEST</a>
<ul>
<li tabindex="2" dir>List element</li>
</ul>
Output is
<p>TEST</p>
<ul>
<li>List element</li>
</ul>
Check this [answer][2].
Having trouble with emails that have multiple images side by side but each row has a different amount of columns/images. I'm putting a table in each row so I don't have to use colspan as the images are all different widths. The more images in a row, the wider the row even though all rows have the same combined width of all their images.
See image example here:
Example HTML (See JS fiddle as the code won't post correctly here for some reason):
<table id="Table_1_col" width="600" border="0" cellpadding="0" cellspacing="0" background="ffffff"
style="background:#fff;display:block;table-layout:fixed;border-collapse:collapse!important;mso-table-lspace:0;mso-table-rspace:0;border-spacing:0;border:0;mso-cellspacing:0;mso-padding-alt:0;padding:0;margin:0;font-size:0;line-height:0;width:600px;min-width:600px;max-width:600px;"
valign="top">
<tbody>
<tr style="display:block;white-space:nowrap;">
<td style="font-size:0;line-height:0;margin:0;padding:0;background:url(images/_TRAVEL-15_05.jpg);background-image:url(images/_TRAVEL-15_05.jpg);background-size:100% 100%;"
valign="top" align="left"><a href="https://www.afterpay.com/en-AU/categories/travel" align="left"
style="font-size:0;line-height:0;display:block;margin:0;padding:0;" target="_blank"><img src="images/_TRAVEL-15_05.jpg"
width="600" height="241" alt=""
style="float:left;width:600px;display:block;margin:0;outline:0;text-decoration:none;-ms-interpolation-mode:bicubic;border:0;"
border="0" align="left"></a></td>
</tr>
</tbody>
https://jsfiddle.net/jup4xw3v/3/
The email has a set width of 600px and the additional side width is most notable on mobile devices where it breaks the flow of the email. The rows are weird widths due to the click areas from our designer.
No matter what I try I can't seem to get the rows displaying at the exact same width.
I did a template for our email marketing campaing. But on gmail, msn (browser based) are good but on outlook is bad. How can i solve the problem ?
A piece of my code:
<td valign="top" width="194" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;">
<tr mc:repeatable>
<td valign="top">
<img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4>
<div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
</div>
</td>
</tr>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
You need to re-declare your font stack in every table cell.
Also, avoid margin, instead use padding in <td> tags.
Float is also not widely supported. If you want to float, you should be using align="left" instead, but for your example, it is better to keep it in tables.
Your code should look something like this:
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="60">
<img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" />
</td>
<td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font">
ARAMA
</td>
</tr>
<tr>
<td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
</div>
</td>
</tr>
</table>
I set the table width 200, you could change it to percentage based if you prefer.
Getting HTML emails to look great across all clients is something that pretty much everyone who has tried to do email marketing runs into. There is no simple answer to your question, but I would start by following some of this advice and testing your email templates with a tool like litmus.
Float simply will not work in Outlook 2007+. Versions of Outlook for Windows from 2007+ use Office as the rendering engine, and thus won't render standard HTML properly.
Align will often work, but the safest course of action is to create a two-column table with the image on the left and the text on the right. The image column should have an explicitly set width. (Don't try to make the table more than one row. In email HTML, it's better to nest a series of simple tables than to create one complex one.)
Make sure that you use the appopriate old-style pre-HTML 4 tag attributes in your table tags. In particular, to get your layout, make sure that the table cells have "valign='middle'".
If you're sending through one of the major email service providers, such as Mailchimp or Campaign Monitor (and you should be, to protect the integrity of your list), it will inline all your style code for you -- so you don't actually need to redeclare the styles for every table cell, you can simply use an embedded stylesheet.
First off:
I hate Outlook :)
Here is why:
I am trying to send an email with the following structure (this is just a simplified example so please don't tell me "Just get rid of the middle tds")
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0"></td>
<td width="0"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
The problem is, that the two tds in the middle lead to a space between the two pictures as you can see in this screenshot http://i48.tinypic.com/6i8rvk.png
I feel like I have already tried everything possible.
cellpadding = 0, cellspacing = 0, border = 0 on table
setting the width of every td with inline css
adding border-collapse: collapse to all tds and the table
adding margin:0, padding:0; border 0; to all tds in inline css
setting the font-size and line-height to 0 in inline css
Nothing worked.
Side notes:
If there is only one empty table cell in the middle, the rendering is fine. So it seems as if each td only accounts for half a pixel
This is already a simplified example and I cannot change the structure of the table meaning that I have to find a workaround for the rendering problems rather than fixing the rather unpretty coding style unfortunately.
Testing
Here is my testing environment - feel free to play around with it: http://putsmail.com/d58ffa01c4b3e29123baab00754716
try putting padding-left and/or padding-right to the tds containing the images, as inline css.
Latest edit: try this --
<tr>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>
i removed the width from tds containing images, hence it takes the default width of the images.
Outlook doesn't like hiding content ;-) But what should work - add some conditional code:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
<tr>
<td style="width:217px" valign="top">
column 1
</td>
<!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
hidden column 2
</td>
<!--<![endif]--><td valign="top">
column 3
</td>
</tr>
</table>
To hide it from outlook, the comments around the column with [!mso / endif] are enough. However you may want to hide in also in outlook.com, gmail.com and some others - for this the other styles are included. Don't forget to restore the settings in mobile view with media queries.
Good luck
Oleg
Have you tried putting the <td>s on the same line? That is, removing the linebreak between elements?
(inner element linebreaks are ignored)
<td>Foo
</td><td>
Bar</td>
Does "display: none" help?
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0" style="display:none"></td>
<td width="0" style="display:none"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
Btw, I did not suffer your problem on Outlook 2003, so I cannot verify it.
I have continued trying to solve this problem - nothing (I have tried every proposal here and more) worked.
In the end I went the more difficult but also the cleanest way I believe and wrote a script that removes all empty columns and all empty rows with an xsl transformation. Now it works in Outlook 2003 - 2010.
I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.
I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
My original jquery selector was
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
This worked great in FF, but didn't trigger the .each function at all in IE.
After messing around for a bit, I got to
jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') > div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});
Not so nice, but works in IE8.
I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working.
Now I go and test in IE7, and again the .each isn't being triggered.
What is the nicest way (and cross-browser compatible) to work with this sort of .each element?
--------------addition--------------
After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&8.
I've gone back to my original code
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
as that seems to me the most efficient.
If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time.
I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either.
The first function i've used works perfectly in firefox.
----------------the html being selected---------------------------
The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table.
<table id="a1">
<tr>
<th colspan="5">
Group Name
</th>
</tr>
<tr class="rowId1" >
<td>
<div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
</td>
<td>
</td>
<td>
<div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
<div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
</td>
<td>
<div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
</td>
<td>
</td>
</tr>
</tr>
<tr class="rowId1" >
<td>
<div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
</td>
<td>
<div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div>
</td>
<td>
;
<div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
</td>
<td>
</td>
<td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
</td>
</tr>
</table>
It turns out this was an issue with IE failing when two different elements have the same ID. Apparently this breaks the .each function.
I had two tables
table.notes#a1 & table.inputs#a1
The .each function should have gone through each table but instead found neither.
jQuery also wouldn't run in ie with
jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
which it should have done, as I am them pointing directly to a specific table even if the id is not unique.
I'm using id's retrieved from the database for the id, and IE doesn't like id's that start with numbers, so I just added an 'a' to the beginning of the id.
However, it apparently doesn't like that either, so now I'm adding the first letter of the class and then the '1' or whatever the id number is.
This solves the issue.