daspianist
daspianist

Reputation: 5495

Modifying <%= f.submit %>'s default CSS input class

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 %>

Upvotes: 0

Views: 314

Answers (1)

jvnill
jvnill

Reputation: 29599

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>

Upvotes: 1

Related Questions