How To Either Separate Text And Button For Skew, Or Combine Text And Button?

So I have this following code that works, but I can't separate the text from the button. For instance, when skewed, the text skews. Any way to separate them?

Solution 1:

without seeing your controllers or routes I would have to guess it would have to be:

<% @categories.each do |cat| %>
  <%= link_to cat.name, category_path(cat), class: "btn btn-primary-2" %>
<% end %>

But if you're not using the conventional restful routes, and your passing a model that doesn't correlate to the controller with same name type as class of your instance variable, you'll need to be more verbose.

<% @categories.each do |cat| %>
    <%= link_to cat.name, controller: 'listings', action: 'show', id: cat.id, class: 'btn btn-primary-2' %>
 <%  end %>

The above should try to produce:

<a href="/listings/show/23" class="btn btn-primary-2">Category Name</a> 
# where 23 and Category name are repspective from the cat object.

See documentation for the variations on how to use link_to helper

Solution 2:

If you want separate the text from the button and use #btn-cat and #btn-text separately.

You can use:

<div class="categories-">
  <% @categories.each do |cat| %>
    <div id="btn-cat">
      <%= link_to listings_path(:category => cat) do %>
        <div id="btn-text"><%= cat.name %></div>
      <% end %>
    </div>
  <% end %>
</div>

Now, all the button it's a link :)

Share