I have a dynamically created table with the row and column numbers stored as data attributes in each cell:
%table
- (1..3).each do |row|
%tr
- (1..3).each do |column|
%td.cell{:data => {:x => column, :y => row}}
The HTML this generates is fine, except that whenever the column equals the row, data-y is missing:
<table>
<tr>
<td data-x='1'></td>
<td data-x='2' data-y='1'></td>
<td data-x='3' data-y='1'></td>
</tr>
<tr>
<td data-x='1' data-y='2'></td>
<td data-x='2'></td>
<td data-x='3' data-y='2'></td>
</tr>
<tr>
<td data-x='1' data-y='3'></td>
<td data-x='2' data-y='3'></td>
<td data-x='3'></td>
</tr>
</table>
Anyone know what's causing this?
This is a bug in Haml version 4.0.0. It’s fixed in 4.0.1.rc.1 – the fix hasn’t made it into a full release as of writing this but you should be okay with the rc1 gem.
Related
I'm trying to display a button for each even row in my table ( Thymeleaf ) but I'm not sure how can I do it
<tr th:each="item, iter : ${flightlist}">
<td th:text="${item.flightNumber}"></td>
<td th:text="${item.airline}"></td>
<td th:text="${item.origin}"></td>
<td th:text="${item.destination}"></td>
<td th:text="${#dates.format(item.takeOffDate, 'MM-dd-yyyy')}"></td>
<td th:text="${item.takeOffTime}"></td>
<td th:text="${#dates.format(item.landingDate, 'MM-dd-yyyy')}"></td>
<td th:text="${item.landingTime}"></td>
<td th:text="${item.flightDuration}"></td>
<td th:text="${item.price}"></td>
// Display button code here if true for even
<td th:if="${iter.even == true ? '<a type="button" class="btn btn-primary"
href="/addUserFlight?id=${item.flightNumber}">Select</a> ' : ''}"></td>
</tr>
Edit: Iter worked!
You can use the Thymeleaf iterStat convention to get the value of even:
<tr th:each="item, iterStat : ${flightlist}">
<td th:text="${item.flightNumber}">[flight number]</td>
<td th:text="${item.airline}">[airline]</td>
<td th:text="${item.origin}">[origin]</td>
<td th:text="${item.destination}">[destination]</td>
<td th:text="${#dates.format(item.takeOffDate, 'MM-dd-yyyy')}">[takeOffDate]</td>
<td th:text="${item.takeOffTime}">[takeOffTime]</td>
<td th:text="${#dates.format(item.landingDate, 'MM-dd-yyyy')}">[takeOffTime]</td>
<td th:text="${item.landingTime}">[landingTime]</td>
<td th:text="${item.flightDuration}">[flight duration]</td>
<td th:text="${item.price}">[price]</td>
<td><a th:if="${iterStat.even}"
type="button"
class="btn btn-primary"
th:href="#{/addUserFlight(id=${item.flightNumber})}">Select</a></td>
</tr>
Note that you also want to put this th:if in your <a> tag because the column will otherwise not be included and it will break the design of your table.
You'll want to review the syntax for anchor tags too. You would need th: on the href because you will want Thymeleaf to dynamically evaluate your flight numbers.
Take a look at #numbers.formatCurrency() to format your price
You can include th:if=${!#lists.isEmpty(flightlist)} on the <table> to not show the table if there are no flights.
Lastly, include some default values between tags so that if you open up the page on a browser without a container, you can still what the design will look like. I usually just include the name of the property.
I have a requirement in which I have to show quarter months with quarter name on the starting month. For eg.
Q120 Q220
COL1 COL2 COL3 APR-19 MAY-19 JUN-19 JUL-19 AUG-19 SEP19
For that I created two tables, one table to print quarters and other to print other columns and their data.
<table>
<tr>
<td width="70px"></td>
<td width="70px"></td>
<td width="70px"></td>
<td width="210px">Q120</td>
<td width="210px">Q220</td>
</tr>
</table>
<table>
<tr>
<td width="70px">COL1</td>
<td width="70px">COL2</td>
<td width="70px">COL3</td>
<td width="70px">APR-19</td>
<td width="70px">MAY-19</td>
<td width="70px">JUN-19</td>
<td width="70px">JUL-19</td>
<td width="70px">AUG-19</td>
<td width="70px">SEP-19</td>
</tr>
</table>
Whats wrong with my code ? I am NOT getting proper alignment as explained in my example . My quarter row is shifting towards left side ideally Q120 should come above APR-19.
I have an AngularJS directive whose template file looks like this:
path/to/myDirectiveA.template.html:
<tr>
<td bgcolor='#7cfc00'>Statement</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
</tr>
It works. The output looks like this:
But then I change the template file by adding an ng-repeat like this:
<tr ng-repeat="currRow in [0, 1, 2, 3]">
<td bgcolor='#7cfc00'>Statement</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
<td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>
And that causes it to break as you can see in the image below. The phrase Hello World! is no longer showing up! Why? How can I fix this problem??
I simply don't see any logical reason why adding an ng-repeat should cause this breakage. It doesn't make sense to me at all.
If you need it, here is the controller and directive that invoke it can be found in this question I posted earlier.
<tbody>
<tr ng-repeat="currRow in [0, 1, 2, 3]">
<td bgcolor='#7cfc00'>Statement</td>
<td bgcolor='#7cfc00'>MyDirectiveACtrl.a.b</td>
<td bgcolor='#ff1493'>{{MyDirectiveACtrl.a.b}}</td>
<td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>
</tbody>
update your myDirectiveA.template.html .Hope it helps you :)
may this solve the problem ($parent)
<tr ng-repeat="currRow in [0, 1, 2, 3]">
<td bgcolor='#7cfc00'>Statement</td>
<td bgcolor='#ff1493'>{{$parent.a.b}}</td>
<td bgcolor='#7cfc00'>{{currRow}}</td>
</tr>
I am working on the rails 3 application where i need to pass the html code in to the string variable and pass it to the web services as parameter.
I have the following code with the loop inside but since it is declare in to the string it is not working with the <%%> and #{} tag
#emaildata = "<H3>FLOOR VIEW ACTION REQUEST</H3>
<table border='0' cellspacing='4'>
<tr>
<td>Submitted On:</td>
<td align='left'><strong>#{Date.today}</strong></td>
</tr>
<tr>
<td> Originator: </td>
<td align='left'><strong>#{session[:user_name]}</strong></td>
</tr>
</table>
<table border=0 width=100%>
<tr bgcolor='##006699'>
<td align='center'><font color='##FFFFFF'><strong>ACTION CODE</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>PART<BR />NUMBER</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>LOCATION</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>BIN QTY</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>PACK QTY</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>UM</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>SCAN CODE</strong></font></td>
<td align='center'><font color='##FFFFFF'><strong>REASON / COMMENTS</strong></font></td>
</tr>
<% (1..PartNoListInEmail.length).each_index do |i|%>
<tr bgcolor='##E0E5E5'>
<td align='center'>#{#ActionCodeListInEmail[i]}</td>
<td align='center'>#{#PartNoListInEmail[i]}</td>
<td align='center'>#{#SendToListInEmail[i]}</td>
<td align='center'>#{#OrderQtyListInEmail[i]}</td>
<td align='center'>#{#PackQtyListInEmail[i]}</td>
<td align='center'>#{#UMListInEmail[i]}</td>
<td align='center'>#{#ScancodeListInEmail[i]}</td>
<td align='center'>#{#reasonForActionIn[i]}</td>
</tr>
<%end%>
</table>"
Please help me .
Save your html as partial as a html.erb
#emaildata = "<%= escape_javascript(render :partial=>'some_partial_name', :locals => {:PartNoListInEmail => #PartNoListInEmail}).html_safe %>"
For combining strings with HTML, you want to use a template system like Erb or Haml. If you don't intend to immediately render the template back to a browser, you can still use Erb to do this by calling Erb directly, having it parse the HTML string and variables and return the result as a string.
Once you go down this road, be extra careful of user provided content and escape anything untrustworthy. When you render erb templates normally in rails, rails does a fair amount of work for you to avoid these sorts of problems, but once you do something like what your example showed, or if you use Erb directly to parse it, you no longer benefit from Rails' safety checks, and therefore will need to put in your own checks.
I want to validate my page but w3c keeps giving me this warning. I want to get rid of it but I can't seem to find the cause of it.
It gives me this error:
A table row was 2 columns wide and exceeded the column count established by the first row (1).
Table and CSS code:
<table>
<tr>
<td>Contact informatie</td>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
<tr>
<td>Email:</td>
<td>info#blabla.nl</td>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
table {
border:none;
padding-left:75px;}
td:first-child {
width:135px;
border:none;
text-align:left;}
td+td {
border:none;
text-align: left;}
Anyone any suggestions?
It means exactly what it says. One of the rows in your table has too many columns. Specifically, the first row has less columns that a subsequent row. But we can't do much unless you post some code.
Edit
The markup for the table is incorrect.
You only have one cell in the first row (or do what PeeHaa suggested)
You need to close off each row with </tr>
Just change this:
<tr>
<td>Contact informatie</td>
</tr>
To this:
<tr>
<td colspan="2">Contact informatie</td>
</tr>
YOu should always close you tablerows (tr): </tr>.
Final version:
<table>
<tr>
<td colspan="2">Contact informatie</td>
</tr>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
</tr>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
</tr>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
</tr>
<tr>
<td>Email:</td>
<td>info#vazcreations.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
In extension to what SimpleCoder said, if you have the first row of a table have only one column, then the futher ones can have no more then one column. If you want to get around this you need to put a table inside the cell i.e.
<td>
<table>
<tr>
<td><!-- Content here --></td>
</tr>
</table>
</td>