I have a Rails 4 application with working datatables in a view. I'm calling a %td to cycle through every other row. I tried appending the cycle class to %trinstead of %td, but that doesn't do any highlighting at all, for some strange reason.
There really isn't a specific pattern in the table as to which items are even or which are odd. Could go 7 rows without any highlighting and then 4 rows in a row with highlighting. Any suggestions, or ideas why this is happening?
My View:
%table.table.tickets-table
%thead
%tr
%th Tickets
%tbody
- #support_queue.tickets.each do |ticket|
%tr
%td{:class => cycle('list_line_odd', 'list_line_even')}
= render ticket.ticket_condition if ticket.ticket_condition
= ticket.id
\-
\#{link_to ticket.name, [#support_queue, ticket]}
In my CSS, I have the following:
.list_line_even {
background: #ccc;
}
.list_line_odd {
background: #fff;
}
Looks like it's picking up correctly in the web browser as well as far as even-odd cycle for each tr with CSS. (tried posting an image, not enough rep :()
Thanks!
are you using bootstrap if so try adding the class table-striped to your table?
for example
%table.table.tickets-table.table-striped
if that doesn't work what does your dataTable js look like?
adding this option could help
sPaginationType: "bootstrap"
Related
Earlier Prawn gem allowed to create a table by its html representation (having an html table string as an input argument like <table class="abc"> .... </table>). Now I didn't find this facility in the manual.
So is it possible now? If not, is there any other option then?
TL;DR: if your use-case is 1) generating both HTML and PDF data (like online invoices etc.), and 2) making sure both look the same, then Prawn is not really the best solution (which is the same suggestion in the Prawn Readme).
In your case, you could parse the HTML using Nokogiri or Upton and extract the data from the HTML table and then use it to generate the PDF representation via Prawn. The HTML styles may not directly translate into the ones used by Prawn and so, even with a lot of code-wrangling, you might not achieve the consistency in styling — which I assume, from the comments on the answer by royalGhost, is the result you want. Also, a simple Nokogiri parsing solution won't work if your HTML table is nested and the parsing code does not cater to that. For example, consider this:
<table>
<tr>
<td>First Column, First Row</td>
<td>Second Column, First Row</td>
</tr>
<tr>
<table>
<tr>
<td>First Column, Second Row</td>
<td>Second Column, Second Row</td>
<td>Third Column, Second Row</td>
</tr>
</table>
</tr>
</table>
Then, in the Ruby parsing snippet, you should ensure that the inner <table>...</table> is parsed into a Prawn::Table object and not a row of Prawn::Table::Cell objects.
Any wkhtmltopdf based options such as WickedPDF or PDFKit offer much cleaner way of achieving the HTML to PDF conversion solution.
You have two options:
Ditch Prawn entirely and prefer the solution above.
Use Prawn by extracting the data from the HTML via Nokogiri/Upton and generate the PDF and not worry about styling being the same as that in the HTML representation.
Well you can use prawnto gem for templates to create table using prawn.
For e.g if you define the following templates, it will draw table with 3 columns with x, y and z width.
data = [ ["Column 1", "Column 2", "Column 3"] ]
table(data, :column_widths => [x,y,z], :cell_style => { :inline_format => true })
I have a list of comments on my page that is zebra colored to aid distinction between each comment.
I achieve the zebra colouring using the rails cycle helper in the partial I use for each comment:
<div class="span9 <%= cycle("odd_response", "even_response") -%>">
I dynamically update this list via a form that prepends a new comment to the top of list via AJAX when the user submits a new call.
As I use the same partial as the template to render this new comment the comment is only colored as the "odd_response" irrespective of the color of the previous response i.e. it starts the cycle process again.
How do I get the partial to respect the order of colors present in the table that it is being prepended to?
My solution would be to drop the cycle call and use this CSS for the zebra stripes.
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
This works in all modern browsers, no IE7/8 support.
I ended up resolving this by placing some custom JavaScript in the create.js action that first checked what the background colour of the last comment was and then altered the new comment to the opposite colour immediately after rendering the object on the page.
I am very new in ruby, in rails and in haml. I was recoding a little site I have, and I was trying to create a link in wich is nested a few elements.
The structure I want to be outputted is this one:
<a href="somewhere">
<span>
<img src="/imgs/hello.png" />
</span>
<strong>6
<em>Oct</em>
</strong>
<h1>Title</h1>
</a>
So I was trying it doing this (obviously its real indentation is one tab more than the parent element):
= link_to("somewhere") do
%span
%img(src="/imgs/hello.png")
%strong 6
%em Oct
%h1 Title
end
Wich for me seems to be logic. But it does not. It gives me this error:
Inconsistent indentation: " \t\t\t\t\t" was used for indentation, but the rest of the document was indented using 1 tab.
The error line number it's the first line after link_to; the %span element. So, I thought it was because I was not using link_to in a correct way, but seeing that the error talks about indentation problems and after trying it in many different ways, I cannot get it into run.
This should work.
= link_to("somewhere") do
%span
%img(src="/imgs/hello.png")
%strong
6
%em Oct
%h1 Title
Also, make sure in your editor you're using spaces as tabs. This will get rid of any funky business.
Rails 2.3.5 (internal work server - stuck at this version for inside apps)
The company 'standard' browser where I work is IE and about 70% of users are using IE7.
What I've slowly been learning (IE7 only) is that if you have FORM beginning or end tags inside a TR or TD, IE7 will create extra lines, sometimes doing very odd things. My solution so far is to put FORM beginning and end tags outside the TABLE tags.
Then, because I want a single line break between tables ... if I use a tag after tables in IE7 only I'll get 3 blank lines between tables where in every other browser there will just be a single line.
Right now I'm dealing with a simple table list of users with a form on each line (delete or change access level). After playing around A LOT with this, IE7 messes up the least when I place the FORM and FORM END tags inbetween table tags like:
<table class="table_standard_blue">
<tr>
<td>
FOO
</td>
</tr>
<% users.each do |user| %>
<% form_for(user) do |f| %>
<tr>
<td>
SOME SELECT / SOME BUTTON
</td>
</tr>
<% end %>
<% end %>
</table>
While the 'guts' of the table will look fine this way, the problem this leaves behind is basically what looks like an extra line break above and below the table (in IE7 only). If I have a couple of tables like this, the effect magnifies and it looks like two blank lines between tables (where in IE8/Firefox) there will be no blank lines.
I know there's something about RAILS putting extra spaces in with FORM tags (and there's suppose to be some fix in RAILS 3 - which I can't use of course at work). Does anyone have any idea how I could fix or hide what's going on in IE7?
Thanks - much appreciated.
I'm not sure you're allowed to place form tags around tr elements, but to answer your question:
Use CSS to reduce the margin-top and margin-bottom of the tables. Before that, though, are you using the right DOCTYPE declaration? That's important to make sure IE7 isn't falling back to emulate layout quirks from IE6 or something.
Before you try what Satya suggested you can try to wrap the form into a span-tag; not sure if it works here but worth a try.
Thanks for the help. Span tags didn't have any affect at all. Also, I went throught multiple doc types and none of them mand any difference. I kept google searching and found a solution though. I'm not 100% sure but it seems to be a problem with IE7 and forms in general (not something a RAILS form_for is doing). Adding this into my stylesheet fixed everything:
FORM
{
display: inline;
}
What I know:
Rails has the cycle() method that enables odd/even rows in a table to have different CSS classes. We can pass multiple classes to the cycle() method and that works great.
I wanted rows which are grouped in three's; so, I used this:
...some html-table code...
<tr class="<%= cycle("table_row_1","table_row_2","table_row_3","table_row_4","table_row_5","table_row_6") %>">
...some more html-table code...
The corresponding CSS I defined is:
.table_row_1 { background-color: red;}
.table_row_2 { background-color: red;}
.table_row_3 { background-color: red;}
.table_row_4 { background-color: blue;}
.table_row_5 { background-color: blue;}
.table_row_6 { background-color: blue;}
It works, but it doesn't feel "clean".
Is there a recommended way to do this in Rails ?
UPDATES
On similar lines to #Ryan Bigg's answer, is it possible to generate strings in sequence so that the cycle() method can be sent strings of the form prefix_1 prefix_2 prefix_3 somehow using the *3 syntax or some other way?
The inspiration to use this "every third row" striping came from an article on Edward Tufte's site
It seems CSS3 can do this (link), but that's not widely supported at this time :(
Not related to question, but I just searched for this problem I have on Google, and the questions listed at questionhub.com! I never asked this on questionhub.com!
Now its on http://loopingrecursion.com too! What's going on.
How about this?
<tr class="<%= cycle(*[["striped"]*3,["unstriped"]*3].flatten) %>">
Actually this sounds like something i would solve using pure CSS:
table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3) { background:red;}
table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n) { background:blue;}
While this is short and dandy, this does not work in IE unfortunately (it will work in the new IE9).
To get this working you could use jQuery, which offers the same selectors and is completely cross-browser compatible.
In your css you add two classes:
table_row_third_even { background: red;}
table_row_third_odd { background: blue;}
and then you write some javascript (inside application.js for instance), like this
$(function() {
$('table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3)').addClass('table_row_third_even');
$('table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)').addClass('table_row_third_odd');
});
and your table would have to have the class highlight (you should change that to a better suiting name, this is just an example); but nothing specific for your tr tags, as they will be added by the javascript code.
<table class='highlight'>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</table>
But for this to work you would need to introduce jQuery inside your project. The good thing: it would keep your ruby-code clear from the clutter needed to do this.
Hope this helps!
I found a way to do this, which is sort of "clean" and suits me for now. Details:
In a controller helper (no error checking, yet!):
def cycle_every_third(options = [])
cycle(options[0],options[0],options[0],options[1],options[1],options[1])
end
HTML:
...
<tr class="<%= cycle_every_third(["table_row_1","table_row_2"] ) %>">
...
CSS:
.table_row_1 { background-color: red;}
.table_row_2 { background-color: blue;}
Is that a good way to go about this I wonder? Any pitfalls in Rails I may not be aware of, of calling cycle() inside a helper method as opposed to calling it in the rhtml/erb file?