rails 3 link_to with nested content_tag to create

Question

Hi I got a noob question, I want to create the following HTML result:

<a href="/controller/action" class="button-big layer">TEXT<span class="arrow-big"></span></a>

In the above HTML I want to have text with a span-class to style in an image via css.

When I try the following implementations the result reflects just one part of the needed implementation:

<%= link_to "TEXT", controller_path, :class => "button-big layer" %>

results in:

<a href="/controller/action" class="button-big layer">TEXT</a>

and

<%= link_to(content_tag(:span, "", :class => "arrow-big"), controller_path, :class => "button-big layer") %>

results in:

<a href="/controller/action" class="button-big layer"><span class="arrow-big"></span></a>

Does anyone know how to accomplish?

score 30 · Answer 1 · answered Mar 10 '12 at 13:42

30

You could also nest tags by using alternative syntax for link_to helper

<%= link_to controller_path, :class=> "button-big layer" do %>
  Text
  <%= content_tag(:span, "", :class => "arrow_big" %>
<% end %>

answered Mar 10 '12 at 13:42

Johny

1,441
10
26

Hi, thanks for your solution, works as well as the other one with a litte "gap". The css style for the "image" which is inserted by the span-tag has to be adjusted because a break is inserted. But that no big thing, well done! – user1260945 Mar 10 '12 at 18:56
It's amazing how no one seems to talk about the block option of `link_to` and `content_tag`. It's as if no one needs to nest, or no one uses haml, where nesting content is very cumbersome. Great answer, good to know this is possible with `link_to`, as well as `content_tag` – ahnbizcad Aug 15 '14 at 04:08
been looking for this one for yonks. Had not comprehended from documentation that link_to could run a block option – Jerome Sep 06 '15 at 12:49

score 10 · Answer 2 · answered Mar 10 '12 at 13:20

10

Simply concatenate your text with the 'span':

<%= link_to(("TEXT" + content_tag(:span, "", :class => "arrow-big")).html_safe,
             controller_path,
             :class => "button-big layer") %>

You'll need the .html_safe around the concatenation since the + operator will otherwise escape the HTML of the content_tag.

answered Mar 10 '12 at 13:20

Thilo

17,565
5
68
84

Hi, yes well done, this was exactly what I'm searching for. Works as expected without any changes in the css, thanks for your solution :-) – user1260945 Mar 10 '12 at 18:55
This worked great, I reversed the text and content_tag for my needs, but it was exactly what I was looking for. – Jared Knipp May 14 '14 at 20:40

score 3 · Answer 3 · answered Sep 16 '15 at 13:41

Reading your question I did solve my problem. Than I propose another way to answer your question.

You could create a helper method to make this kind of link that you need. It would be something like this

def link_with_text_and_span(href, text, span_options= {}, link_options = {})
    span_tag = content_tag(:span, span_options[:content] || '', :class => span_options[:class] || '')
    link_to(span_tag, href, :class => link_options[:class] || '')
  end

The good about it is that your view will be cleaner. Then you can just call this helper method in your view

  <%= link_with_text_and_span("/controller/action", "TEXT", {class: 'arrow-big'}, class: button-big) %>

PS: This code can be improved for sure, if other users want to, please do it.

score 2 · Answer 4 · answered Sep 14 '13 at 23:29

2

Here's another way you could use without the content_tag. Not the cleanest but it works!

<%= link_to '<span class="arrow_big"></span>'.html_safe, controller_path, class: "button-big layer" %>

answered Sep 14 '13 at 23:29

coletrain

2,809
35
43

rails 3 link_to with nested content_tag to create

4 Answers4