0

I am wondering how you can add a CSS class parameter to an ERB statement inside of a do statement like so;

<% @relatives&.each do |f| %>
  <%== f.summary %> <!-- This one here -->
<% end %>

I tried this: <%== f.summary, class: "class-name" %>

since it works in a form like this: <%= f.input :name, class: "class-name" %>

Is this even possible outside of a form?

The point of this is I am using CKEditor to write a summary for something and it is injecting it's own <p> tags, rendering the styles on <p> tags surrounding it useless.

It used to be written like this: <p class="card-text basic"><%= raw f.summary %></p>

Jake
  • 1,086
  • 12
  • 38
  • 1
    What's going on with the `<%==`? That doesn't seem like correct syntax. The rest looks fine. – Matthew Apr 12 '19 at 19:11
  • 2
    @Matthew It's crazy, I just learned what it does. `<%==` replaces `<%= raw`. "The double equal means that the string is not escaped" - Richard_G from the comments of [this question](https://stackoverflow.com/a/7996827/7372897). – Jake Apr 12 '19 at 19:16
  • Could you try without the `==` and see if you see the same behavior? You are comparing a working example `<%= f.input :name, class: 'class_name' %>` with something that might be causing some unknown side-effect. – Matthew Apr 12 '19 at 19:24
  • @Matthew I've tried that, the same thing happens though. – Jake Apr 12 '19 at 19:46
  • Can you try with `input_html` as described here? https://stackoverflow.com/questions/9371490/how-to-add-a-class-to-the-input-component-in-a-wrapper-in-simple-form-2 – max pleaner Apr 12 '19 at 20:25
  • @maxpleaner Thanks for the suggestion, unfortunately, it doesn't worth with/without the raw tags. I even tried it without rocket-script. – Jake Apr 12 '19 at 22:08
  • The question is: what's in the `f` variable? `<%= f.input :name, class: "class-name" %>` means "send `input` (call method `input`) to `f`, passing symbol `:name` and hash `{:class => 'class-name'}`" as arguments. The output depends on what the method `f.input` returns. – igneus Apr 12 '19 at 22:28
  • 1
    If `f` is something like a string or an `ActiveRecord` or some other object not understanding `input`, it will just raise an error. – igneus Apr 12 '19 at 22:37
  • @igneus It's a string inside `p` tags (`

    This text is the summary

    `).     – Jake Apr 13 '19 at 00:31
  • Than it, of course, won't work. If you need to modify HTML code you have in a string, the only really safe way is to parse it (with something like `Nokogiri::HTML`), modify the DOM tree and serialize it again. – igneus Apr 13 '19 at 06:49

1 Answers1

4

classes are attributes of DOM elments. Strings don't have classes.

You could wrap it in a span and assign the class to the span... do something like this...

<%= tag.span f.summary, class: 'class-name' %>

or to use p tag...

<%= tag.p f.summary, class: 'class-name' %>
SteveTurczyn
  • 36,057
  • 6
  • 41
  • 53
  • While this does work to apply a class, it prevents me from using un-escaped code. I've tried using `<%==` and `<%= raw` but didn't work. Would you know how to pull this off? Also, what if there are multiple `

    ` tags in the string? Would this apply the class to each one?

     – Jake Apr 15 '19 at 15:47
  • Ah, right... I'm not at my desk right now, could you try `<%= tag.p f.summary.html_safe, class: 'class-name' %>` and see how that works? Alternatively, `<%= (tag.p(f.summary.html_safe, class: 'class-name')).html_safe %> – SteveTurczyn Apr 15 '19 at 19:15
  • Okay, the two examples you just gave are not applying the class but is displaying the text as raw and isn't displaying the `

    ` tags. _But_, `.html_safe` does work with `tag.span` and achieves everything! Why do you think it behaves like that?

     – Jake Apr 15 '19 at 22:47