Rails CSS zebra-striping rows, but in sets of three - ruby-on-rails

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?

Related

Datatables with Rails cycle is not highlighting every other row

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"

how to create two columns with div and CSS

I realize that this topic was discussed many many times. However, none seem to apply to me. I am generating HTML page using ASP.NET MVC construct HTML.DisplayFor() which generates <div class="display-label">Label</div> <div class="display-field">Value</div> pair for every property. I am trying to display them as a column - each line would have a label and a value. I tried various combinations, the best I came is the following:
.display-label {
font-weight: bold;
float: left;
width: 25%;
}
.display-field {
margin-left: 25%;
width: 75%;
}
Looks close to what I want; however, some fields have NULL value, in which case generated HTML is <div class="display-field"></div> In this situation next label is shown on the same line (where value would otherwise be).
I tried clear and display in various combinations - but none of them shows a label, a value and an empty block if the value is missing (for example, clear shifts all values up).
I am sure I am not the first one trying to solve this problem. But I couldn't find anything relevant; and my CSS skills are clearly insufficient. And yes, I know that I can write a custom DisplayFor template; but I was hoping that it wouldn't be necessary!
<div class="display-label">Label</div> <div class="display-field"></div>
<div style="clear:both"></div>
<div class="display-label">Label</div> <div class="display-field">Value</div>
Worked for me.
I think I got something that makes it work:
.display-field::after {
content: ".";
visibility: hidden;
}
Intuitively, I don't like it; so if somebody has a better solution, I'd love to use that one. But it works, and I don't have to mess with the template for a huge class

mottie tablesorter destroy, destroys look and feel of table

I've been using phantomjs and wkhtmltopdf to generate PDF reports of large 7000 row bootstrapped themed tables with color. Both run out of memory when trying to do so. Both uses nearly 1GB of memory to try to generate the PDF of the table. So I've been trying to figure out why. I want to first try to unlink tablesorter and clear it's cache when I'm printing a PDF report because it doesn't need any user interaction (no sorting or filtering needed). But everytime I use destroy, it destroys the look and feel of the table. I want to retain the look and feel but only destory tablesorter stuff like widgets and cache so that it doesn't consume so much memory. Is there a way to clear tablesorter but retain the look and feel of my table?
Update:
Thanx for replying Mottie!
I actually tried that and debugged and found that this is how the DOM looks like with tablesorter enabled with bootstrap theme:
<table data-bind="if: details" id="ColorTable-sticky" class="tablesorter tablesorter-bootstrap table table-bordered hasFilters containsStickyHeaders tablesorter-sticky-hidden" style="position: fixed; margin: 0px; top: 40px; visibility: hidden; z-index: 2; height: 0px; width: 1190px; padding: 0px; border: 0px; left: 36px;">
But once I destroy(false), I get this:
<table data-bind="if: details" id="ColorTable-sticky" class="tablesorter">
I would have thought that "tablesorter-bootstrap" class would be retained in the class but it appears that all classes were removed except for "tablesorter" class.
How do I get it to retain the tablesorter-bootstrap class?
The destroy method does have parameters:
// Remove tablesorter and all classes but the "tablesorter" class on the table
// callback is a function
$("table").trigger("destroy", [false, callback]);
If you pass false as the first parameter, everything is still destroyed, but the "tablesorter" class, including the theme name (e.g. "tablesorter-blue"), is retained.
The sort arrows are removed as well.
Update: Oh, I guess the "tablesorter-bootstrap" class is removed because it is part of the "uitheme" widget. I'll look into that. In the mean time, use the destroy callback function to restore the class name:
$("table").trigger("destroy", [false, function(table){
$(table).addClass('tablesorter-bootstrap');
}]);
Update 2: Ok, that didn't work as expected, you'll need to reapply the "uitheme" widget, but since the destroy method removes the API, I'll update the destroy method in the repository and have it working in the next udpate.

Slim Syntax for Inline Div/Table Classes with Embedded Ruby

I have a table defined in slim:
table
tr
td
=_("Some Content")
td
=_("Some Content")
I would like to add some classes to certain td tags. I can do so like this:
table
tr
td.extraclass
=_("Some Content")
td
=_("Some Content")
This adds "extraclass" to that td:
<td class="extraclass"> Some Content </td>
How can I add a class by embedding some rails/ruby into this? In normal rails I could do:
<td class="<%=#article.attribute%>">
How do I do this here? I don't think I can do:
td.=_(#article.attribute)
But I would like to add classes in some similar way here. Anybody have any advice? if I have not been clear in what I'm attempting to do, please let me know what I can add.
The doc for this feature is here:
td class="#{#article.attribute}"
According to the documentation here you can achieve this as follows:
td class=#article.attribute
Btw., when writing td.class1 class=some_ruby_exprthe two classes will automatically be merged into the resulting class attribute.

IE7 and forms in tables (forms inside tables causing extra line breaks in IE7 only)

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;
}

Resources