0

I have been trying without much luck to get <%= f.submit %> to appear as the same as my other "buttons", all in a row. I have found this helpful post on modifying the class of f.submit, but realized upon examining its element in browser that it took on the class of input, regardless of which additional classes I added as option parameters, thus restricting its appearance.

Essentially, each of my other buttons has the following form:

<div class="sort-nav">
  <ul>
    <li><h4><%= link_to "Some stuff", some_link_path %></h4></li>
  </ul>
</div>

And I was wondering if there is a way to fit all of these styles compacted into one class, and override that of the input class contained in f.submit. Thanks.

For edification, this button is going to be my "Follow"/Unfollow" button used to create or destroy Relationships, which I first intend to render a _follow_form partial with the following code:

  <% if current_user.following?(@course) %>
    <%= render 'unfollow' %>
  <% else %>
    <%= render 'follow' %>
  <% end %>

With each of the individual _followpartial looking like the following:

<%= form_for(current_user.relationships.build(followed_id: @course.id)) do |f| %>
  <%= f.hidden_field :followed_id %>
  <%= f.submit "Follow course" %>
<% end %>
Community
  • 1
  • 1
daspianist
  • 5,336
  • 8
  • 50
  • 94

1 Answers1

1

a bit hackish but you can always use js to submit the form so instead of using f.submit, change it to

<div class="sort-nav">
  <ul>
    <li>
      <h4><%= link_to_function "Some stuff", '$(this).closest("form").submit()' %></h4
    </li>
  </ul>
</div>
jvnill
  • 29,479
  • 4
  • 83
  • 86
  • Thanks! This looks like the optimum solution actually, since it fits with the rest of the buttons I made. The only issue is I am actually intending to render a series of partials, which this button will act to `create` or `destroy ` a Relationship (I posted more code above in the question).. and I am not sure how I could use the js here for this.. thanks again. – daspianist Feb 27 '13 at 03:29
  • what's wrong with changing this <%= f.submit "Follow this user" %> with the html? – jvnill Feb 27 '13 at 03:32
  • can you try that again? the error is because of the quotations on the js. please try the updated answer – jvnill Feb 27 '13 at 04:00
  • I actually noticed one hitch: while the top of the new follow/unfollow button align the same as the others, the bottom part always extends a bit longer than the rest. Even when doing something like `padding-bottom: -10px` didn't work. Im unsure whether an extra line is being added, and despite trying several options with the CSS the button still extends longer than the rest. – daspianist Feb 27 '13 at 04:18
  • Thank you! My css-fu is weak.. and this has been very helpful. – daspianist Feb 27 '13 at 04:26