HTML code inside buttons with simple_form

Question

I'm new to rails, and just found the simple_form gem. I installed it with bootstrap suport, but now I can't get this code to work the way I want it

<%= f.button :submit, "<i class='icon-ok icon-white'></i> Save", class: "btn btn-primary" %>

I just want to put the icon inside the button, but when I do this, it shows me a button with the text '<i class='icon-ok icon-white'></i> Save'

I also tried to do

<%= f.button :submit, class: "btn btn-primary" do %><i class="icon-ok icon-white"></i> Save<% end %>

But with no success. How can I add some HTML inside the button with simple_form gem?

Solution 1

Don't use content_tag. The following works:

  <%= button_tag(type: 'submit', class: "btn btn-primary") do %>
    <i class="icon-ok icon-white"></i> Save
  <% end %>

Solution 2

In simple_form 3.0rc use :button button type (it passes your block to original ActiveView button helper):

<%= f.button :button do %>
  <i class="icon-save"></i>
  Commit
<% end %>

Or write additional button wrapper.

For additional info look into simple_form/form_builder.rb FormBuilder#button method.

Solution 3

I think you can't do it with simple_form. But I have good news for you. You should be fine using rails helper along side with simple form.

just do

button_tag(type: 'submit', class: "btn btn-primary") do
  content_tag(:i, class: "icon-ok icon-white")
  "Save"
end

Not sure if this works, even the syntax but it should give you a hint

Solution 4

One line example submit button in Rails with bootstrap btn class:

<%= button_tag(type: 'submit', class: "btn btn-primary") do %> Save <% end %>

View more solutions

Comments

[Andrew Smith]

Tried it, doesn't work. Writing a button wrapper sounds like a good idea, though.

[emptywalls]

For some reason this only works with :button, and not :submit. I'm using 3.1rc2

[Bombazook]

When you use button method it passes your block to "#{type}_button" or "#{type}" helper. Simple form button helpers doesn't support blocks so using button_button helper that declared as alias_method :button_button, :button we call original method from ActionView::Helpers::FormBuilder. With :submit button type it's not possible. Read code of simple_form/form_builder.rb for better explanation.

[Cyril Duchon-Doris]

Even if this solution works, I don't like it because I can't see the f variable anymore :( ...

[Undistraction]

@CyrilDD Why do you need to see the form builder so badly? All it is is a collection of methods to simplify building a form, using a model or class as reference. A submit button has no need to know about the model's structure like inputs do, so there is actually little reason to use the builder. Unfortunately Rails's handling of most of the view tier is a complete disaster and woefully in need of updating. There are far bigger issues.

[Cyril Duchon-Doris]

I don't need it "so badly". It's just tha in my code, I have many <%= f.something %> and for some reason a <%= button_tag %> shows up. Somewhat ugly. However, this (may ?) become a real problem for submitting nested forms...

[Undistraction]

@CyrilDD It's not a problem with nested forms, as you are actually submitting a single form with a single submit button. No matter how 'nested' it is, it's just clever use of a single form. Take a look at the rendered form. You'll see all the nesting is just encoded into the name attributes of the inputs and decoded at the other end.

[Cyril Duchon-Doris]

But what about "forms inside forms" ? Then we'd want to know which form we want to send... (though I can't think of any scenario where one would do this... maybe if we just want to post a subset of changes ?)

[Undistraction]

You cannot literally nest forms: w3.org/TR/html5/forms.html#the-form-element

[elsurudo]

This makes a <button>, not an <input>, so the form isn't submitted on click. Am I missing something?

[Undistraction]

@elsurudo The button type is submit.

[Andrew]

this works, and should be the actual answer that solves it since it uses simple_form methods.

[Ziv Galili]

"Also note that :button needs to be the first param" thats solved my problem. i tried using :submit, which didn't work! it didn't parse the text to html, but when i changed to :button it worked perfectly. thanks

[Erowlin]

This should be the accepted answer. github.com/plataformatec/simple_form#buttons