I am using zend forms and zend decorators.
I want to create a sub-table in a parent table's td. like this:
<table>
<tr>
<td>Username:</td>
<td>
<table>
<tr>
<td> <input type="text"> </td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr>
</table>
How can i create this table.
can anyone help me plz.
This might not be the best solution, as you maybe able to create your own decorator to render the form (with the sub-tables). But you could always render each form element individually, using the renderViewHelper() function
<table>
<tr>
<td>Username:</td>
<td>
<table>
<tr>
<td><?php echo $this->form->username->renderViewHelper() ?></td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr> <tr>
<td>AnotherElement:</td>
<td>
<table>
<tr>
<td><?php echo $this->form->anotherElement->renderViewHelper() ?></td>
<td> <img/> </td>
</tr>
</table>
</td>
</tr>
</table>
Related
I got a table like below that renders in the dialog box. I am trying to capture the value of input which is inside the column.
The Xpath is /html/body/div[9]/div[2]/table/tbody/tr[8]/td[2]/table/tbody/tr[1]/td[1]/input'
I did try multiple ways to get required value but could't get it so someone help me how to capture input value which is inside the particular , full xpath and css path is not working.
<table>
<tbody>
<tr>
<td>Room type:</td>
<td><b>
Deluxe Balcony Riverview - All Inclusive
</b>
</td>
</tr>
<tr>
<td>Date:</td>
<td><b>
01 Mar 2022
</b>
</td>
</tr>
<tr>
<td>Minimum Stay:</td>
<td>
<input name="txtMinimumStay" type="text" value="1" id="txtMinimumStay" class="helper" title="The minimum nights a guest must stay in this room type" style="width:40px;">
night(s)
</td>
</tr>
<tr>
</tr>
<tr>
<td>Maximum Stay:</td>
<td>
<input name="txtMaximumStay" type="text" value="0" id="txtMaximumStay" class="helper" title="The maximum nights a guest can stay in this room type" style="width:40px;">night(s)
</td>
</tr>
<tr>
<td>Sold:
</td>
<td><b>
0
room(s)</b>
</td>
</tr>
<tr>
<td>Allocation:</td>
<td>
<table>
<tbody>
<tr>
<td width="70px">
<input name="textAllocation" value="0" id="textAllocation" type="text" style="width: 50px">
</td>
<td style="font-size: 9px">Extra adult rate (per night):</td>
<td>
<input name="txtAdultPrice" type="text" value="21" maxlength="4" id="txtAdultPrice" class="helper" title="Extra person charge for adults" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator1" style="display:none;">Please only enter a whole number for the adult rate</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Rate:</td>
<td>
<br>
<table>
<tbody>
<tr>
<td width="70px">
<input name="txtQuickRate" type="text" id="txtQuickRate" style="width: 50px;" value="85">
$AUD
</td>
<td style="font-size: 9px">Extra child 1 rate (per night):</td>
<td>
</td>
<td>
<input name="txtChildPrice" type="text" value="15" maxlength="4" id="txtChildPrice" class="helper" title="Extra person charge for children 1" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator2" style="display:none;">Please only enter a whole number for the child 1 rate</span>
</td>
</tr>
<tr>
<td></td>
<td style="font-size: 9px">Extra child 2 rate (per night):</td>
<td>
</td>
<td>
<input name="txtChild2Price" type="text" value="7" maxlength="4" id="txtChild2Price" class="helper" title="Extra person charge for children 2" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator3" style="display:none;">Please only enter a whole number for the child 2 rate</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Availability Status:
</td>
<td>
<table id="rblStopSellDialog" cellspacing="0" cellpadding="0" style="font-size:8pt;border-collapse:collapse;">
<tbody>
<tr>
<td><input id="rblStopSellDialog_0" type="radio" name="rblStopSellDialog" value="0" checked="checked"><label for="rblStopSellDialog_0">Available</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_1" type="radio" name="rblStopSellDialog" value="1"><label for="rblStopSellDialog_1">Stop sell</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_2" type="radio" name="rblStopSellDialog" value="2"><label for="rblStopSellDialog_2">Closed to arrival</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_3" type="radio" name="rblStopSellDialog" value="3"><label for="rblStopSellDialog_3">Closed to departure</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_4" type="radio" name="rblStopSellDialog" value="4"><label for="rblStopSellDialog_4">On Request</label></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have a question regarding the magento order emails.
I have created my own order template by loading the default template and modifying it. When i take a look via the 'preview template' button on there, the email appears without order information (of course) but with every styling etc.
However when my customer gets the email it is pure text with no styling at all.
What could i have been doing wrong
Idk if it helps but here is my email template:
{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style='background: #fff' class="email-heading">
<h1 style='color: #68883e;'>Thank you for your order</h1>
<p>Your order is being process right now</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3 style='display: inline; float: left'>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p style='display: inline; float: right'>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
<td class="address-details">
<h6>Client:</h6>
<p><span class="no-link">{{var order.getclientfirstname().format('html')}}</span></p>
</td>
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table><!-- asd-->
{{layout handle="sales_email_order_items" order=$order}}
{{template config_path="design/email/footer"}}
You shouldn't use the CSS classes to stylize the templates.
Also, you shouldn't use the file with the styles info, that is located anywhere else, as they are not supported by the majority of the email services.
Instead, you can directly use the attribute tags (to implement the stylazation) or use the styles right in the email code (using the tag <style>)
And here is the list of tags you can use:
https://www.campaignmonitor.com/css/
I am trying to use TinyMCE to allow my users to modify a handlebars report template. The template contains several elements that are not valid to TinyMCE and they are being moved around. See the {{#each data}} and {{/each}}
Here is good HTML code for my handlebars template:
<table class="table table-bordered">
<thead>
<tr>
<th><h4>Item</h4></th>
<th><h4 class="text-right">Quantity</h4></th>
<th><h4 class="text-right">Rate/Price</h4></th>
<th><h4 class="text-right">Sub Total</h4></th>
</tr>
</thead>
<tbody>
{{#each Details}}
<tr>
<td>{{Item}}<br><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
After I past the code into TinyMCE, it results to the following:
{{#each Details}}{{/each}}
<table class="table table-bordered">
<thead>
<tr><th>
<h4>Item</h4>
</th><th>
<h4 class="text-right">Quantity</h4>
</th><th>
<h4 class="text-right">Rate/Price</h4>
</th><th>
<h4 class="text-right">Sub Total</h4>
</th></tr>
</thead>
<tbody>
<tr>
<td>{{Item}}<br /><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
</tbody>
</table>
Has anyone ran across a plugin or something else that may help me?
I just ran into this... I have an order confirmation email that I need to be configurable with a list of order items in a table; same issue.
I did just realize I probably shouldn't be using tables anyway, since they are not responsive, but I ultimately was able to solve the problem with HTML comments, like this:
<tr style="font-weight: bold;">
<td style="width: 145px;">Qty</td>
<td>Item</td>
<td>Unit Price</td>
<td>Total</td>
</tr>
<!--{{#order.line_items}} -->
<tr repeat="">
<td style="width: 145px;">{{quantity}}</td>
<td>{{product.name}}</td>
<td>{{currency unit_price}}</td>
<td>{{currency total}}</td>
</tr>
<!--{{/order.line_items}} -->
<tr>
<td style="width: 145px;"> </td>
<td> </td>
<td><strong>Subtotal:</strong></td>
<td>{{currency order.subtotal}}</td>
</tr>
I was able to use a custom attribute on my Element and use:
<tr repeat="{{#each Details}}">
</tr repeat="{{/each}}">
I'm having issues with Zurb Ink's email. So it looks fine in desktop, however it there is this gap when it hits the media queries and it seems to be doing it with the containers when its stacked on top of each other. I want it to span the whole width.
http://i.stack.imgur.com/xygNK.png
Here is my code:
<table class="container" id="hero-container">
<!-- hero logo -->
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td id="hero-logo"><img id="logoImage" src="images/hero-logo.png" alt="Hero In The News" /></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /hero logo -->
<!-- hero image -->
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td><img id="headerImage" src="images/hero-img.png" alt="City of San Jose - Capital of Silicon Valley" /></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /hero image -->
<!-- hero main article -->
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="heading1 text-pad">Residents can Pace Energy Use <br/>with New Program</td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad"><p>The city of San Jose has implemented a program to help residents pace their water and energy consumption. </p></td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- button -->
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad link"><p>Read Full Article</p></td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--/button -->
<!-- /hero main article -->
</table>
<!-- articles row 1 -->
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Energy Efficiency Program Ushers Green Jobs into Kern</h2>
<p>The green economy has arrived in Kern County, and not a moment...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Stockton Gets a New “HERO”</h2>
<p>From insulation to more efficient air conditioning to solar panels to...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /articles row 1-->
<!-- articles row 2 -->
<table class="container article-container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper article-wrapper">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Fresno estimates $56M from HERO program</h2>
<p>Officials with the City of Fresno expect to see more than $56 M...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last article-wrapper-last">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Lompoc City Council approves HERO Program</h2>
<p>A new program that helps homeowners make energy and...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Caveat: I am new to Ink myself. What "jumps out" at me is that you're using a container on the outside and multiple rows inside. For full width, swap the row and container classes --> so that the table with class row contains a table with class container.
I have table with id parentTable. Also there is child table in the third column of every row. When i count the length of rows of parent table it gives me sum of rows of parent and child table. Also this happens with the tds. How do i achieve this for getting/iterating rows of parent table only and interating tds of parent rows only. I tried $('parentTable >tbody>tr') but not worked for me. Please assist. Below is the sample.
<table id="parentTable"><tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
</td>
</tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
</td>
</tr>
</table>
You can assign different classes to the rows (tr s) of the parent table, and the child table. And use those classes for selecting them. You can do the same for the cells (tds) too.
For example, you if your table looks like -
<table class="parentTable">
<tr class="parentRow">
<td class="parentCell">Cell 1</td>
<td class="parentCell">Cell 2</td>
<td class="parentCell">
<table class="childTable">
<tr class="childRow">
<td class="childCell">Cell 31</td>
<td class="childCell">Cell 32</td>
<td class="childCell">Cell 33</td>
</tr>
</table>
</td>
</tr>
</table>
In your jquery, to get just the parent rows and their cells you can use
$.each($(".parentRow"), function() {
$.each($(this).find(".parentCell"), function() {
//Do Something
});
});