Issue with stylizing Rails form - ruby-on-rails

I found a custom form style i want to copy. however, it's hard for me to figure out how to integrate the rails into its style since it is much more complicated than examples I've been
able to find.
Specifically, I don't know how to call the specific classes the example uses in my rails app.
I would greatly appreciate some guidance on how to create my rails form in this style:

Basically, you need to do something like:
<%= form_for #listing, html: { class:'form-inline lead-big'} do |f| %>
<div class='form-group'>
</div>
<% end %>
and then in between the .form-group div, you can either use the same code that is provided on the Bootsnipp page, or you can use Rails Form Helpers.
So instead of this:
<div class="form-group">
<label for="name">Hello, I am <span>Your name</span></label>
<input type="text" id="name" placeholder="#maridlcrmn" required>
and
</div>
it could be:
<div class="form-group">
<%= f.label :name do %>
Hello, I am <span>Your name</span>
<% end %>
<%= f.text_field :name, id: "name", placeholder: "#maridlcrmn", required: true %>
and
</div>
See this page for more: http://guides.rubyonrails.org/form_helpers.html

Really cool form I must add!
Depends if you want to do the form for a model or just submitting info. If for mode, use form_for if to submit form_tag
<%= form_tag some_url_path, method: :get do %>
<div class="form-group">
<%= label_tag :name, raw("Hello, I am <span> Your name </span>")%>
<%= text_field_tag :name%>
and
</div>
...
<%end%>

Related

How does form_with know which method to call inside a model?

I'm having a hard time trying to understand how form_with works. To understand most basic usage of form_with, I was looking how Rails set it up in the rails g scaffold process.
I created an equipment scaffold and in it, I looked at how a form was setup in the _form.html.erb file.
<%= form_with(model: equipment, local: true) do |form| %>
<div class="container">
<div class="row">
<div class="col col-lg-10 col-offset-left-1">
<div class="form-group">
<%= form.label :name %><br />
<%= form.text_field :name, placeholder: "equipment name", class: "form-control" %>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
Turned out I'm still confused how the form knows that this is form should create a new equipment or edit existing equipment? The form only specifies the model but I can't find where the method is specified.
Would someone be able to point me to the right direction? thanks
it's enough to specify the model because the method form_with can check if the model (already saved) so it will send patch request or the model is a (new model) so it will send a post request.
Active record already has some functions to be used to know if the record new or persisted
equipment.new_record? # returns true when the model is new and false if saved
equipment. persisted? # returns false when the model is new and true if saved
the rails source code here shows that
https://github.com/rails/rails/blob/c87f6841b77e5827ca7bd03a629e2d615fae0d06/actionview/lib/action_view/helpers/form_helper.rb#L1530
the method also can know the path of the request easily from the model similar to path_for
Your code block:
<%= form_with(model: equipment, local: true) do |form| %>
<div class="container">
<div class="row">
<div class="col col-lg-10 col-offset-left-1">
<div class="form-group">
<%= form.label :name %><br />
<%= form.text_field :name, placeholder: "equipment name", class: "form-control" %>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
will render the something like this:
<form action=”/equipments” accept-charset=”UTF-8" method=”post” data-remote=”true”>
<input name=”utf8" type=”hidden” value=”✓”>
<input type=”hidden” name=”authenticity_token” value=”…”>
<input type=”text” name=”post[name]”>
<input type=”submit” name=”commit” value=”Create” data-disable-with=”Create”>
</form>
Now, the form_with view helper uses, the URL to know what value the model is and render the form accordingly.
DHH made an issue explaining the reason for the introduction of form_with

Rails. Splitting a radio button collection into columns with Form Helpers or Simple_form

I've the following form that uses Simple_form gem:
<%= simple_form_for #match_prediction do |f| %>
<%= f.input :outcome, label: false, as: :radio_buttons, collection: [['local', match.local_team], ['Tie', 'Tie'], ['visit', match.visiting_team]], label_method: :second, value_method: :first %>
<%= f.submit 'Save' %>
<% end %>
Currently it works as expected, meaning: Renders 3 radio buttons, exclusive from each other and each resulting in a unique string being passed to the server.
The problem: I'd like to separate each of the radio buttons across different columns in a Bootstrap grid like below:
<div class="row prediction">
<div class="col-sm-4">
<!-- FIRST RADIO BUTTON HERE -->
</div>
<div class="col-sm-4">
<!-- SECOND RADIO BUTTON HERE -->
</div>
<div class="col-sm-4">
<!-- THIRD RADIO BUTTON HERE -->
</div>
<%= f.submit 'Save' %>
</div>
Since the whole collection is specified in one line within the form code, I can't simply split lines and insert them in the relevant HTML.
Is there a way to achieve this either via simple_form or vanilla rails form helpers?
I've considered splitting the radios as separate form inputs but this would allow to select more that one option at once. I'd appreciate your help.
Coudn't you use a standard rails helper in simple_form form? What about using the radio_button helper directly. Docs
<div class="row prediction">
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'local', checked: #match_prediction.outcome == 'local' %> <%= match.local_team %>
</div>
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'Tie', checked: #match_prediction.outcome == 'Tie' %> <%= 'Tie' %>
</div>
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'visit', checked: #match_prediction.outcome == 'visit' %> <%= match.visiting_team %>
</div>
<%= f.submit 'Save' %>
</div>
And if it is possible to access standard FormHelper in simple_form you can call:
<%= f.radio_button 'outcome', 'xzy' %> <%= 'whatever' %>

How to create dropdown with rails form using bootstrap?

The form tag below works. However, I wanted to add styling and substitute text_field_tag into dropdown select so user can select the hours.
<%= form_tag("/availability", method: "post") do %>
<%= label_tag(:available_hour, "Add Availability:") %>
<%= text_field_tag(:available_hour) %>
<%= submit_tag("Add") %>
<% end %>
I am having trouble creating form with dropdown select using bootstrap form. I tried:
<form method="post" action="/availability">
<select class="custom-select">
<% (1..24).to_a.each do |el| %>
<option value=el><%= el%></option>
<% end %>
</select>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But it gave me ActionController::InvalidAuthenticityToken error.
This is done inside user show view, and the action I am firing is from Availability model' create action.
I found a relevant SO post on bootstrap form, but the answer uses PHP. This is what he used: <form action="results.php" method="POST" role="form" class="form-horizontal">.
I think if I can somehow point to bootstrap to look for Availability, it should work.
How can I point out to bootstrap form which controller (and method) to use?
You're probably omitting a CSRF value that's automatically included by form_tag.
Try adding
#app/views/layouts/application.html.erb
<%= csrf_meta_tags %>
Or you can add it to the form block directly:
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
form_tag helper link, you can add option , authenticity_token: false
actually rails already has actionview helper to help you create dropdown with hour here is link
for your problem you can try
<%= form_tag("/availability", method: "post", authenticity_token: false) do %>
<div class="row form-group">
<%= f.label "Add Availability:", :class => 'control-label col-sm-3' %>
<div class="col-sm-5">
<%= select_hour :available_hour, :class => 'form-control') %>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<% end %>

Trouble with Devise validation styling

I am using the Devise gem for a user login page and user registration pages on a basic Ruby on Rails app. I want to get rid of the ugly default styling for when there is an error. I was able to replace the error box with some bootstrap styling, but I can't find any answers about how to get rid of the ugly red boxes that appear around my inputs and my input labels. Also, the inputs are shrinking when validation occurs. They start at 100% width. Then, if there is an error,they shrink. Here is an image of both problems. The input box should be as wide as the .danger div above:
Here is the code for this page:
<div class="row">
<div class="top col-md-4 col-md-push-4 col-sm-6 col-sm-push-3 col-xs-10 col-xs-push-1">
<div class="logo_container">
<%= image_tag "musilogopurple.png", class: 'logo_big' %>
</div>
<p class="text-center">Forget your password? Enter your email below and we will send you reset instructions.</p>
<br />
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= devise_error_messages! %>
<div class="form-group">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, class: 'form-control' %>
</div>
<div class="actions">
<br />
<%= f.submit "Send", class: 'btn btn-purple'%>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
</div>
I would very much appreciate some guidance. Thank you!
Did you scaffold anything? Scaffolds bring in CSS files try deleting those if you're not using it. In addition, it would help if you posted the CSS files it's receiving styling from.

Rails bootstrap_form_for: text_area is automatically hidden

I made a very simple form using bootstrap_form_for:
<%= bootstrap_form_for(#ad) do |f| %>
<%= f.text_field :title %>
<%= f.text_area :body %>
<%= f.text_field :image %>
<%= f.text_field :user_id %>
<%= f.submit %>
<% end %>
However, in the text_area for the 'body' field, this is the html generated:
<div class="form-group">
<label class="control-label" for="ad_body">Body</label>
<textarea class="form-control" name="ad[body]" id="ad_body" style="display: none !important;"></textarea>
</div>
For some reason, it's set to display:none. I searched anywhere in the application and couldn't find a place I set it to display:none.
Any clue?
I'm using Ruby 2.2.3 and Rails 4.2.4.
For anyone facing this issue, I managed to fix it just by changing the column name from body to ad_body. It's just that probably body is a protected term.

Resources