How to add a CSS class to a partial rendered in Rails

Question

I have a multiple partials that I am rendering and would like to add a CSS class to one of them. Is there a way to do this?

Here is the page I am rendering

<%= render :partial => "/account/plan_yearly" -%>

which adds this html to the page

<div class="offer">
    <!--MORE HTML-->
</div>

What I would like to do is something like this:

<%= render :partial => "/account/plan_yearly", :class => "highlight" -%>

Which would render the html below:

<div class="offer highlight">
    <!--MORE HTML-->
</div>

But it doesn't work the way I want it to. Any thoughts? Much appreciated!

Thanks Everyone

David · Accepted Answer · 2016-11-10 18:41:50Z

5

You will need to render the partial using locals and then use them within the partial:

<%= render partial: "/account/plan_yearly", locals: { myclass: 'highlight' } %>

What this does is make a local variable named myclass with a value of 'highlight' for the scope of the partial.

So in the partial you can then make use of this:

<div class="offer <%= myclass %>">
    <!--MORE HTML-->
</div>

edited Nov 10, 2016 at 18:41

answered Nov 10, 2016 at 17:59

David

3,6203 gold badges23 silver badges41 bronze badges

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

3 Comments

user3239351 Over a year ago

Thank you both for helping me out! really appreciate it. I am having a new issue now. The partial is rendering <div class="offer #{myclass}"> with the #{ } and not as ruby. Any thoughts?

David Over a year ago

oops yeah should be erb shouldn't it - shall update the answer

thesowismine Over a year ago

Hey @David , I've been trying to get this exact same thing to work but i keep getting the following error: undefined local variable or method `myclass'. Any thoughts as to what I'm doing wrong?

user7159179 · Accepted Answer · 2017-11-08 22:23:00Z

1

Don't know if this might still help, but I just had the same problem, as it can be read on the rails documentation, in order to pass correctly values through locals it is really important to state explicitly taht you're randering a partial;

Correct:

<%= render partial:"path/to/partials", locals:{bla: "bla"} %>

Incorrect

<%= render "path/to/partials", locals:{bla: "bla"} %>

As the second line doesn't explicitly state that the rendering object is a partial, passing locals won't work at all...

answered Nov 8, 2017 at 22:23

user7159179

Comments

fedetaglia · Accepted Answer · 2016-11-10 17:59:26Z

0

You can pass it as variable

= render "/account/plan_yearly", highlight: true

Then in partial

<div class="offer #{'highlight' if highlight}">
  <!--MORE HTML-->
</div>

answered Nov 10, 2016 at 17:59

fedetaglia

2383 silver badges10 bronze badges

Comments

user3239351 · Accepted Answer · 2016-11-10 18:37:31Z

0

Passing it in as a variable worked!

<%= render partial: => "/account/plan_yearly", locals: { myclass: 'highlight' } %>

<div class="offer #{myclass}">
    <!--MORE HTML-->
 </div>

Thanks Everyone!

answered Nov 10, 2016 at 18:37

user3239351

712 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to add a CSS class to a partial rendered in Rails

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related