I am trying to add bootstrap styling to my rails form_for form. Such that I can change the button styling and make the from inline. I tried adding doing something like:
<div class="form-group"> <%= f.submit "Create your account", class: "btn btn-primary" %> </div>
However, it did not work. Here is my code in my file.
<%= form_for @subscription do |f| %> <%= f.text_field :email %> <%= f.submit %> <% end %>
You need to add the classifications within the erb code.
For instance
<%= f.submit, class: “btn btn-primary” %>
(PS it seems like you might be customizing the create button so you have to list that in the ERB code for it to show up properly)
I am trying to add bootstrap styling to my rails form_for form. Such that I can change the button styling and make the from inline. I tried adding doing something like:
<div class="form-group"> <%= f.submit "Create your account", class: "btn btn-primary" %> </div>
However, it did not work. Here is my code in my file.
<%= form_for @subscription do |f| %> <%= f.text_field :email %> <%= f.submit %> <% end %>
When you view that in a browser, what do you see?
Bootstrap 3 doesn’t require a classname on the form element itself any more, unless you want to do an inline form, in which case you need to add class=“form-inline” to it. To do that in a standard Rails form_for helper, set that in the html: attributes:
<%= form_for :foo, html: { class: ‘form-inline’ } %>
The rest (form-group and similar) can be done easily with regular HTML inside the form partial, and you can add a classname to a form element like this:
<%= f.text_field :bar, class: ‘form-control’ %>
Walter
Walter Davis wrote in post #1178402:
However, it did not work. Here is my code in my file.
<%= form_for @subscription do |f| %> <%= f.text_field :email %> <%= f.submit %> <% end %>
When you view that in a browser, what do you see?
Bootstrap 3 doesn’t require a classname on the form element itself any more, unless you want to do an inline form, in which case you need to add class=“form-inline” to it. To do that in a standard Rails form_for helper, set that in the html: attributes:
<%= form_for :foo, html: { class: ‘form-inline’ } %>
The rest (form-group and similar) can be done easily with regular HTML inside the form partial, and you can add a classname to a form element like this:
<%= f.text_field :bar, class: ‘form-control’ %>
Walter
Thanks Walter.
I tried this below it change the submit button text. However, the styling of the button is not be applied. Am I leaving something wrong or leaving somtehing off.
<%= form_for @subscription do |f| %> <%= f.text_field :email %> <div class="form-group"> <%= f.submit "Update", class: "btn btn-primary" %> </div> <% end %>
Example - I tested.. The tried this code below as a test and it works. But, it does not contain the ruby code. <form class="form-inline"> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email Address"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
John Lahr wrote in post #1178401:
You need to add the classifications within the erb code.
For instance
<%= f.submit, class: "btn btn-primary" %>
(PS it seems like you might be customizing the create button so you have to list that in the ERB code for it to show up properly)
On Tuesday, September 1, 2015 at 8:43:34 AM UTC-7, Ruby-Forum.com User
I tried this below it change the submit button text. However, the styling of the button is not be applied. Am I leaving something wrong or leaving somtehing off.
<%= form_for @subscription do |f| %> <%= f.text_field :email %> <div class="form-group"> <%= f.submit "Update", class: "btn btn-primary" %> </div> <% end %>
Example - I tested.. The tried this code below as a test and it works. But, it does not contain the ruby code.
<form class="form-inline"> <div class="form-group"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email Address"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form>
How have you integrated bootstrap into your application?
John Lahr wrote in post #1178409:
How have you integrated bootstrap into your application?
gem 'bootstrap-sass', '~> 3.3.5'
In my custom stylesheet.css.scss @import "bootstrap-sprockets"; @import "bootstrap";
Bootstrap is working all through my site, except with this form problem.
If you are cutting and pasting exactly from your view to your HTML it seems kind of odd.
The ‘form group’ is showing up not where you put it before the form, but before the input field.
The Submit button still says submit, not update as you indicate in your view.
Also - your missing the f.label for your form?
The form control div is not something i ever used - i’d stick with the basics and see if that works.
<%= form_for(@subscription) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.submit “Update”, class: “btn btn-primary” %>
<% end %>
Do you have any other bootstrap code on this view form and is it displaying properly?
To make sure you get it everywhere you want, I’d put your bootstrap imports in the application.scss file (In current rails versions you don’t need css.scss, just scss)
John Lahr wrote in post #1178417:
If you are cutting and pasting exactly from your view to your HTML it seems kind of odd.
The 'form group' is showing up not where you put it before the form, but before the input field. The Submit button still says submit, not update as you indicate in your view.
Also - your missing the f.label for your form?
The form control div is not something i ever used - i'd stick with the basics and see if that works.
<%= form_for(@subscription) do |f| %> <%= f.label :name %> <%= f.text_field :name %> <%= f.submit "Update", class: "btn btn-primary" %> <% end %>
Do you have any other bootstrap code on this view form and is it displaying properly?
To make sure you get it everywhere you want, I'd put your bootstrap imports in the application.scss file (In current rails versions you don't need css.scss, just scss)
Thanks, it work the following code.
I had to replace <%= f.submit :sample, class:"btn btn-primary" %>
with this code. the difference was submit vs button. <%= f. button :sample, class:"btn btn-primary" %>
<%= form_for @subscription do |f| %> <%= f.text_field :email %> <%= f.button :sample, class:"btn btn-primary" %>
<% end %>
I’m glad you were able to get it to work - but does the button work to submit your form?
In my usage, btn btn-primary work on most elements. Not sure why changing the tag makes it work and now am concerned that your form won’t submit based on the above code?
John Lahr wrote in post #1178421:
I'm glad you were able to get it to work - but does the button work to submit your form? In my usage, btn btn-primary work on most elements. Not sure why changing the tag makes it work and now am concerned that your form won't submit based on the above code?
Your correct. It fixed the button issued. After checking rails console the emal are coming in as empty strings on submit. This is stressing.
One issue I had when I was trying to get bootstrap fully to work was that I hadn’t included it in my application.js file (i know for sure i needed it for drop downs, I don’t know what else you might need it for). So if you haven’t done that I’d look at the code.
Honestly though <%= f.submit, class: ‘btn btn-primary’ %> always works for me (have you tried it purely the basic way with out :sample that you showed earlier?)
I’d make sure that the bootstrap is in your application.css.scss (or application.scss file if you wish) so that it does cascade to all pages.
One issue I had when I was trying to get bootstrap fully to work was that I hadn't included it in my application.js file (i know for sure i needed it for drop downs, I don't know what else you might need it for). So if you haven't done that I'd look at the code.
Honestly though <%= f.submit, class: 'btn btn-primary' %> always works for me (have you tried it purely the basic way with out :sample that you showed earlier?) I'd make sure that the bootstrap is in your application.css.scss (or application.scss file if you wish) so that it does cascade to all pages.
I have nothing to add here, this has always “Just Work™”ed for me.
<div class="actions form-group"> <%= f.submit class: 'btn btn-success' %> </div>
...is copied and pasted out of an erb form I’m working on right now.
Walter
You’re right it shouldn’t matter but when things aren’t working like they should be without any obvious explanation you try everything.
And BTW
<%= f.submit class: 'btn btn-success' %>
That shouldn’t work either if you copied and pasted right from your code because there’s a comma missing between submit and class
(I did test f.submit, class ‘btn btn-primary’ just now on my lunch break and it worked for me as I expected, so there’s something else in the original posters code causing the issue)
You're right it shouldn't matter but when things aren't working like they should be without any obvious explanation you try everything.
And BTW
<div class="actions form-group"> <%= f.submit class: 'btn btn-success' %> </div>
That shouldn't work either if you copied and pasted right from your code because there's a comma missing between submit and class
No, there should never be a comma before the first argument, only after it. I’ll write it out with parentheses so you can see the reason why.
<%= f.submit( class: ‘btn btn-success’ ) %>
Walter
One thing to try when odd things are happening is to validate the html. View the source in the browser, copy the whole text, and paste it into the validator at The W3C Markup Validation Service. If the html is not valid the browser silently guesses what you mean and it often guesses incorrectly.
Colin
Here is the code entirely:
class SubscriptionsController<ApplicationController def create @subscription = Subscription.new(subscription_params) p params["subscription"]["email"] @subscription.save redirect_to root_path end
private
def subscription_params params.require(:subscription).permit(:email) end end
Views <%= form_for @subscription do |f| %> <%= f.text_field :email %> <%= f.submit "Create", class: 'btn btn-success' %> <% end %>
This is more of a display/view problem - the issue is more likely going to be in your stylesheet, appplication.html.erb or this specific view erb file
PS - does the form work even if the styling doesn’t? Can you submit emails?
John Lahr wrote in post #1178443:
PS - does the form work even if the styling doesn't? Can you submit emails?
Yes. The form works completely. The styling is the problem in this form only. The same buttons are working in other places with no problem.