I have the following handlebars file:
<table>
<tbody>
{{#name_days}}
<tr>
<td class="name-days-country">
<span class="flag-sm flag-sm-{{flag}}"></span>
<span class="name-days-country-name">{{country}}</span>
</td>
<td class="name-day-dates">
{{#each months}}
<td class="name-days-tile">
<span>{{this}}</span>
</td>
{{/each}}
</td>
</tr>
{{/name_days}}
</tbody>
</table>
I'm expecting <td class="name-days-tile"> to be inside <td class="name-day-dates"> but it renders as:
<td class="name-day-dates"></div>
<td class="name-days-tile"></div>
Why isn't it rendering as expected?
The issue ended up being that one cannot put a td inside a td.
While one can manually do it, without it being valid in plain HTML, handlebars detected the issue and automatically applied a closing </td> before adding another opening <td> during the render process.
Related
I have an image in google spreadsheet. Pressing the button fires the script which is supposed to open a stylized table. Instead, it opens a table and fails to apply CSS style to it. I read Google documentation on making a separate file for styling and putting an include in the main HTML file as follows
// <?!= include('stylesheet'); ?>
I did this. I get a table with with being a plain text.
How to make the script actually process CSS styles?
gs file:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
stylesheet.html file with CSS for tables
<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>
stundu_laiki.html with a table
<!DOCTYPE html>
<html>
<head>
<base target="_top">
**<?!= include('stylesheet'); ?>**
</head>
<body>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:10</td>
</tr>
<tr>
<td>2.</td>
<td>9:20 - 10:00</td>
</tr>
<tr>
<td>3.</td>
<td>10:10 - 10:50</td>
</tr>
<tr>
<td>4.</td>
<td>11:05 - 11:45</td>
</tr>
<tr>
<td>5.</td>
<td>12:00 - 12:40</td>
</tr>
<tr>
<td>6.</td>
<td>13:10 - 13:50</td>
</tr>
<tr>
<td>7.</td>
<td> 14:00 - 14:40</td>
</tr>
<tr>
<td>8.</td>
<td>14:50 - 15:30</td>
</tr>
<tr>
<td>9.</td>
<td>15:35 - 16:15</td>
</tr>
</table>
<h2> Saīsināto dienu stundu laiki</h2>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:00</td>
</tr>
<tr>
<td>2.</td>
<td>9:10 - 9:40</td>
</tr>
<tr>
<td>3.</td>
<td>9:50 - 10:20</td>
</tr>
<tr>
<td>4.</td>
<td>10:35 - 11:05</td>
</tr>
<tr>
<td>5.</td>
<td>11:20 - 11:50</td>
</tr>
<tr>
<td>6.</td>
<td>12:20 - 12:50</td>
</tr>
<tr>
<td>7.</td>
<td> 13:00 - 13:30</td>
</tr>
<tr>
<td>8.</td>
<td>13:40 - 14:10</td>
</tr>
<tr>
<td>9.</td>
<td>14:15 - 14:45</td>
</tr>
</table>
</body>
</html>
Use createTemplateFromFile instead then evaluate your html. See final script below.
Final script:
function openDialog() {
var html = HtmlService.createTemplateFromFile('stundu_laiki')
.evaluate()
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
Output:
As per new email rules (thanks Microsoft and Google) all margins are stripped from your HTML. So using margin: 0 auto is out for a solution.
The structure is:
<table>
<tr>
<td align="center">
Button
</td>
</tr>
Now I could add yet another table inside the td but it is already like the 2nd nested table and I'm hoping there is a different solution other then nesting another table. The align="center" doesn't work.
Try this code, I'm using this code to send html email and it works fine for gmail, outlook
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
Button
</td>
</tr>
</table>
Also, you can check allow css property for html email here: https://www.campaignmonitor.com/css/
Cuz CSS in email is dangerous... buh BAM. ;D
<table width="100%">
<tr>
<td align="center">
Button
</td>
</tr>
</table>
Old, school, but why not just use blank td's on each side? Ah, it's the 90's again!
<table>
<tr>
<td width="25%"></td>
<td width="50%">
Button
</td>
<td width="25%"></td>
</tr>
</table>
I have a asp.net mvc 3 view for printing a table. I would like a printable view pop-up.
The resulting HTML print is compatible/formatted for 8.5x11 paper.
The entire page only contains one table, which possible has many rows. Therefore it has many pages, basically.
Export to pdf is fine.
Should I add CSS or other tricks?
<body>
<table class="ui-widget">
<thead>
<tr>
<td class="ui-widget-content">
ID
</td>
<td class="ui-widget-content">
PIN
</td>
<td class="ui-widget-content">
First Name
</td>
<td class="ui-widget-content">
Middle Name
</td>
<td class="ui-widget-content">
Last Name
</td>
</tr>
</thead>
#foreach (var r in ViewBag.PINS)
{
<tr>
<td class="ui-widget-content">#r.IDNumber
</td>
<td class="ui-widget-content">#r.PIN
</td>
<td class="ui-widget-content">#r.FirstName
</td>
<td class="ui-widget-content">#r.MiddleName
</td>
<td class="ui-widget-content">#r.LastName
</td>
</tr>
}
</table>
Have you thought about a print.css file? You can style the page then to fit on 8.5x11" (this is the easiest and fastest way). If you need it exactly right then you should use a ASP.net PDF export library.
I am trying to have my form in a table but it generates a table and makes it a mess.
the generated table is as following:
<div>
<s:form action="myaction" >
<table border="1">
<tr>
<td><s:textfield name="name" label="Name" /></td>
<td><s:textfield name="family" label="Family" /></td>
<td><s:submit/></td>
</tr>
</table>
</s:form>
</div>
Source code :
<div>
<form id="myaction" name="myaction" action="/application/myaction.action" method="post">
<table class="wwFormTable"> <<<generated table
<table border="1">
<tr>
<td><tr>
<td class="tdLabel"><label for="Search_Name" class="label">Name:</label></td>
<td
><input type="text" name="Name" value="" id="Search_Name"/></td>
</tr>
</td>
<td><tr>
<td class="tdLabel"><label for="Search_Family" class="label">Family:</label></td>
<td
><input type="text" name="Family" value="" id="Search_Family"/></td>
</tr>
</td>
<td><tr>
<td colspan="2"><div align="right"><input type="submit" id="Search_0" value="Submit"/>
</div></td>
</tr>
</td>
</tr>
</table>
</table></form>
Use the "simple" theme if you do not want to use S2's default "xhtml" theme.
You'll lose S2's automatic error reporting. You may wish to consider creating your own theme.
Alternatively, you can use the "simple" theme on individual controls.
See the "Themes and templates" docs to get started.
Try to use any theme in struts form tag
eg:
<s:form action="Courses" theme="css_xhtml">
<table border="0">
<tr>
<td><s:textfield name="courseAbbr" /></td>
</tr>
</table>
</s:form>
May Be you should use this code instead...
<sp:form >
<tr>
<td>
<table>
<sp:textfield name="name"></sp:textfield>
</table>
</td>
<td>
<table>
<sp:textfield name="family"></sp:textfield>
</table>
</td>
<td>
<table>
<sp:submit/>
</table>
</td>
</tr>
</sp:form>
All,
This xpath locator works fine in Firefox:
ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
This does not work in IE. I have been trying to convert to CSS locator
without success. The item I am trying to select is Seller. Here's the
whole blob:
<div style="width: 168px; overflow: auto; height: 107px; padding-right: 0px;" class="dxlbd" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_D">
<input type="hidden" name="ctl00$ctl00$mainPage$rightColumn$wholeControl$grid$cell2_3$roleX$DDD$L" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_VI" value="0">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: separate;" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBT">
<tbody>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemSelected" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI0T0">Choose</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI1T0">Buyer</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemHover" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0">Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI3T0">Buyer & Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI4T0">Observer</td>
</tr>
</tbody>
</table>
</div>
Any ideas greatly appreciated.
Blake
There are a few ways that you could locate the seller cell. To locate it using CSS based on the content of the cell try:
css=td:contains(Seller)
If the id is static then the following should also work, however the id is unusually long, which could conceivably cause issues. I haven't tested this myself.
id=ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0