Conditional CSS in Ruby and Haml Table

Question

I have a list of items in a table. Some are true and some are false. Is there a way that the true elements can have one background colour whilst the false elements have another. I was considering writing a method in the application helper but I am not sure how is best to write this. So far all i have is

%td.success= person.success

This currently prints out true or false to the table but i would just like to add some background colour to this?

engineersmnky · Accepted Answer · 2015-06-18 14:58:19Z

3

Or why not something like this:

css

td.success { background-color: 'green' }
td.failure { background-color: 'red' }

then in the haml

%td{class: "#{person.success ? 'success' : 'failure'}"} = person.success

Or

- if person.success
  %td.success = person.success
- else
  %td.failure = person.success

answered Jun 18, 2015 at 14:58

engineersmnky

30.5k2 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lilp Over a year ago

Thanks! Is there a way to do this within a helper file instead of within the haml?

engineersmnky Over a year ago

@Em8 depends on what you mean by helper? Are we creating a view helper that will generate the DOM element? A boolean helper to just return the appropriate class String? maybe something like def success_cell(val); haml_tag ("#{val ? 'td.success' : 'td.failure'}", val);end and then you could just call success_cell(person.success)

JLF · Accepted Answer · 2015-06-18 14:59:51Z

1

You may want to consider doing this with some JavaScript/jQuery when the page renders:

$(document).ready(function() {

    $("td").each(function() {

        if ( $(this).html() === true ) {
             $(this).css("background", "blue");
        }
        else {
             $(this).css("background", "red");
        }

    }

}

With some more context to what your rendered HTML looks like, we can tweak this to get something more specific to your case.

edited Jun 18, 2015 at 14:59

answered Jun 18, 2015 at 14:46

JLF

2,3708 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

Conditional CSS in Ruby and Haml Table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related