CODEWITHSUNDEEP
cssruby-on-railsruby
Neil
Neil

Reputation: 5188

Remove Button Styling From f.submit in Rails Form

I have a simple form that simply sets the #active attribute to true/false. Within the form there is only one single hidden_field. Here is how I currently have the submit button for the form looking when the #active status is true.

active button

When clicked, the form will submit and change the #active attribute to false. When redisplayed it will look like this:

inactive button.

Basically the form functions as a toggle switch that behind the scenes submits a form which toggles an attribute to true/false.

It works wonderfully. However, I do not want any of the default button styling. I don't want that gray box or the border. Instead: I only want to show that font-awesome glyphicon for the button, and that is it.

Here is the code I currently have which displays the glyphicon with the gray button css:

<td>
  <%= form_for blog do |f| %>

    <% if blog.active %>
      <%= f.hidden_field :active, value: false  %>
    <% else %>
      <%= f.hidden_field :active, value: true  %>
    <% end  %>

    <% if blog.active? %>
      <%= f.button do %>
        <i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
      <% end %>
    <% else %>
      <%= f.button do %>
        <i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
      <% end %>
    <% end  %>
  <% end %>
</td>

Question: How can I take the button styling off of the f.submit button and only have the glyphicon to represent the submit button?

Upvotes: 0

Views: 1729

Answers (1)

Neil
Neil

Reputation: 5188

Would love to hear if there is a better solution. Basically all I did was added a new css class which sets the background property to none and the border property to none.

<% if blog.active? %>
  <%= f.button, class: 'remove-submit-btn-style' do %>
    <i class="fa fa-toggle-on fa-2x text-success" aria-hidden="true"></i>
  <% end %>
<% else %>
  <%= f.button, class: 'remove-submit-btn-style' do %>
    <i class="fa fa-toggle-off fa-2x text-danger" aria-hidden="true"></i>
  <% end %>
<% end  %>

And then in app/assets/stylesheets/application.scss

.remove-submit-btn-style {
  background: none;
  border: none;
}

active

inactive

Upvotes: 1

Related Questions