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:
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)
On Tuesday, September 1, 2015 at 8:43:34 AM UTC-7, Ruby-Forum.com User
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
How have you integrated bootstrap into your application?
Walter D. 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 %>
Example - I tested…
The tried this code below as a test and it works. But, it does not
contain the ruby code.
John L. 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 %>
Example - I tested…
The tried this code below as a test and it works. But, it does not
contain the ruby code.
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 L. 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.
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 L. 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 %>
John L. 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.
On Tue, Sep 1, 2015 at 11:28 AM, Abdulaleem S. [email protected]
On Sep 1, 2015, at 2:32 PM, John L. [email protected] wrote:
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.
…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
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)
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
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
On 1 September 2015 at 16:41, Abdulaleem S. [email protected]
wrote:
<%= form_for @subscription do |f| %>
<%= f.text_field :email %>
<%= f.submit %>
<% end %>
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
John L. 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.
PS - does the form work even if the styling doesn’t? Can you submit
emails?
This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.
Sponsor our Newsletter | Privacy Policy | Terms of Service | Remote Ruby Jobs