Adding bootstrap styling to ruby on rails form_for

[Abdulaleem Seyed]

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

--
Posted via http://www.ruby-forum.com/.

[John Lahr]

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)

[Walter Lee Davis]

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

> --
> Posted via http://www.ruby-forum.com/.
>

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/738b375731807c87bfbd171efcb55b83%40ruby-forum.com.
> For more options, visit https://groups.google.com/d/optout.

[Abdulaleem Seyed]

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>

[Abdulaleem Seyed]

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>

[John Lahr]

How have you integrated bootstrap into your application?

[Abdulaleem Seyed]

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.

[John Lahr]

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)

[Abdulaleem Seyed]

John Lahr wrote in post #1178417:

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 Lahr]

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?

[Abdulaleem Seyed]

John Lahr wrote in post #1178421:

Your correct. It fixed the button issued. After checking rails console
the emal are coming in as empty strings on submit. This is stressing.

[John Lahr]

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.

--
You received this message because you are subscribed to a topic in the Google Groups "Ruby on Rails: Talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/rubyonrails-talk/R5hjKKVfMAA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to rubyonrails-ta...@googlegroups.com.

To post to this group, send email to rubyonra...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/2b551b889d633ee2ba248c67744bcfea%40ruby-forum.com.

[Walter Lee Davis]

> On Sep 1, 2015, at 2:32 PM, John Lahr <john...@gmail.com> 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.

<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

>
>
> On Tue, Sep 1, 2015 at 11:28 AM, Abdulaleem Seyed <li...@ruby-forum.com> wrote:
> 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.
>
> --
> Posted via http://www.ruby-forum.com/.
>
> --
> You received this message because you are subscribed to a topic in the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/rubyonrails-talk/R5hjKKVfMAA/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/2b551b889d633ee2ba248c67744bcfea%40ruby-forum.com.
> For more options, visit https://groups.google.com/d/optout.
>
>
> --

> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.

> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.

> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/CAEBjNa2Vv_OOUk%2BtWdKmKQ-Mu0ch4yrsSmTPXr_X%3DjwTYPo-1Q%40mail.gmail.com.

[John Lahr]

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

(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)

[Walter Lee Davis]

> On Sep 1, 2015, at 3:16 PM, John Lahr <john...@gmail.com> wrote:
>
> 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

>
> (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 received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.

> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/CAEBjNa3u5f-zTFQukuOidmA9EVkjDv6BsJecr4bWm3tEZL2G8g%40mail.gmail.com.

[Colin Law]

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 https://validator.w3.org/#validate_by_input.
If the html is not valid the browser silently guesses what you mean
and it often guesses incorrectly.

Colin

[Abdulaleem Seyed]

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

[John Lahr]

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

[John Lahr]

PS - does the form work even if the styling doesn't?  Can you submit emails?

[Abdulaleem Seyed]

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.

[John Lahr]

If that is the case it would sound like there's something going in in your style sheets cascading to this view specifically, and the problem won't be found in the controller, it'll be found in your assets/stylesheets, layout/application.html.erb or this specific view itself.  There's probably some stray character throwing things off