Descrepancy in div structure when rendered from different views - html

I have a confusing HTML situation in the rails application that I'm working on. So I have a new view and an edit view that invoke the same partial view _form.html.erb.
The _form partial is structured as follows:
<%= simple_form_for #incorporation do |f| %>
<div class="panel-body">
<div id="basic_info" class="form_section">
Some stuff
</div>
<div id="address" class="form_section"> More stuff</div>
<div id="equity" class="form_section">.....</div>
<div id="directors" class="form_section">...</div>
<div id="ip" class="form_section">....</div>
<div id="contractor" class="form_section">....</div>
</div>
<% end %>
The problem is: when the pages are rendered in the browser, the edit view shows the div#contractor outside of div.panel-body BUT in the new view, it's inside where it's supposed to be.
See the firebug outputs I grabbed below:
..../new/
..../edit/
But again, both edit and new point to exactly the same _form.html.erb
See below:
new.html.erb
<h1>New</h1>
<%= render 'form' %>
<%= link_to "Back", root_path, class: "btn btn-default" %>
edit.html.erb
<h1>Edit</h1>
<%= render 'form' %>
<%= link_to "Back", root_path, class: "btn btn-default" %>
The only thing different between them is literally the little heading I put at the top.
My question is whether anyone has any guess as to what might be causing this.
Clearly I'm not expecting anyone to comb my code for THE bug, as I truncated it to avoid an insanely long post. But I'd be interested if anyone's encountered this before or has any suggestions for where I might begin looking.
UPDATE 1:
It just gets weirder. So I decided to take the div.panel-body out of the partial and put it into edit.html.erb like so:
<h1>Incorporation</h1>
<div class="panel-body">
<%= render 'form' %>
</div>
<br/>
<%= link_to "Back", root_path, class: "btn btn-default" %>
However, the problem remained the same.
Update 2:
I've found a workaround by moving div#contractor above div#ip. It would seem that there's something amiss with div#contractor then. I've included it below
<div id="contractor" class="form_section">
<div class="form-left"><h2>Employees Contractors</h2></br><p>stuff</p></div>
<div class="form-right">
<div>
<%= company.simple_fields_for :contractor_people do |contractor| %>
<%= render 'contractor_person_fields', f:contractor %>
<% end =%>
<%= link_to_add_association 'Add Person', company, :contractor_people, class: "btn btn-default add-button" %>
</div>
<div class="form_subsection">
<div>
<%= company.simple_fields_for :contractor_orgs do |contractor| %>
<%= render 'contractor_org_fields', f:contractor %>
<% end =%>
<%= link_to_add_association 'Add Company', company, :contractor_orgs, class: "btn btn-default add-button" %>
</div>
</div>
</div>
</div>

Related

Submitting multiple forms in one click

I was looking at the question below, which has a good answer for what I will ask, but I have a doubt. I cannot comment yet so that is why I am making another post.
How to submit multiple, duplicate forms from same page in Rails - preferably with one button
This is my view for the form
new.html.erb
<h1 class="page-title">Nuevo Precio</h1>
<hr class="title-division">
<div class="alta-form-container">
<%= form_tag "/precios" do %>
<% 2.times do %>
<%= render 'form', precio: #precio %>
<% end %>
<%= submit_tag "Submit", class: "btn btn-success" %>
<% end %>
<%= link_to 'Lista Precios Cliente', client_precios_path %> <br><%= link_to 'Ver', [#client, #precio] %> <br>
</div>
and my _form.html.erb
<div class="field">
<%= label_tag :precio, "Precio" %>
<%= text_field_tag "precios[][precio]" %>
</div>
<div class="field">
<%= text_field_tag "precios[][cant_acomodato]" %>
</div>
<div class="field">
<%= hidden_field_tag "precios[][client_id]" %>
</div>
When I submit the form I get an error that says
'No route matches [POST] "/precios"'
which I'm guessing is because on my new.html.erb I wrote form_tag "/precios" do
Any thoughts on what I should change or edit? thanks in advance
actually you have only one form here, because _form.html.erb will generate only inputs, that according to form below
<%= form_tag "/precios" do %>
that will generate
form action="/precios" method="post">
if you want leave it like that, you should add to your config/routes.rb
post '/precios', to: 'controller_name#method_name', as: :controller_name_method_name
your situation:
post '/precios', to: 'PreciosController#create', as: :precios_create
also check this
documentation

Why is my HTML form validation error message displaying so far to the right?

The error message is displayed too far on the right as you can see on this picture of the validation error message
<%= form_for #listing do |f| %>
<div class="row">
<div class="col-md-12 select">
<div class="form-group">
<label>お家の種類</label>
<%= f.select :home_type, [["一軒家","一軒家"], ["マンション","マンション"], ["アパート","アパート"]], {prompt:"選択してください"}, {required: 'true', autofocus: 'true', class: 'form-control'} %>
</div>
</div>
</div>
<br>
...
<div class="actions">
<%= f.submit "Save", class: "btn btn-danger" %>
</div>
<% end %>
How should I fix the validation message position?
You cannot control the positioning or formatting of these error balloons. They are built into the browser. The spec does not specify their appearance or location.

Rails 4, Bootstrap 3, form-inline input-group button in same row

still pretty new to all this, so thanks for any help here. I have read all the threads I could find but I think I understood the theory, just cant find the mistake in my individual setting:
I want to have a comment input field together with a post button in the same line.
My div is the following:
<div class="input-group">
<div class="form-inline">
<%= form_for(#comment, html: { multipart: true }) do |f| %>
<%= f.text_field :content, placeholder: "Neuen Kommentar abgeben...", class:"form-control" %>
<span class='input-group-btn'>
<%= f.submit "Posten", class: "btn btn-primary" %>
</span>
<%= hidden_field_tag :parent_id, micropost.id %>
<%= hidden_field_tag :car_id, micropost.car_id %>
<% end %>
</div>
</div>
I have tried several other solutions that I have found, but it never puts them in the same row. I have already looked at my CSS and the divs on higher levels, but I cant seem to find it. Can anyone point me in the right direction here?
Best regards,
Peter
One way to accomplish inlining of form fields with the label is to use the bootstrap add-on feature
This is what the add-on inline form field looks like.
<div class="form-inline">
<div class="row">
<%= simple_form_for(#comment, html: { multipart: true }) do |f| %>
<div class="input-group input-group-sm">
<span class="input-group-addon input-group-xs" id="basic-addon1">
<%= f.button :submit, "Posten", class: "btn btn-sm btn-default" %></span>
<span class="input-group-addon input-group-xs" id="basic-addon1">
<%= f.text_field :content, placeholder: "Neuen Kommentar abgeben...", class: "btn btn-sm btn-default" %></span>
<span class="input-group-addon input-group-xs" id="basic-addon1">
<%= f.input :other_inline_field, class: 'form-control input-group-xs nudge_down_6', required: false %></span>
</div>
<div class="input-group input-group-xs" style="display:block;">
<small><%= link_to "inline link", somelink_here_path %> | </small>
<small><%= link_to "inline link2"), other_link_path %> | </small>
</div>
<% end %>
</div>
</div>
I recommend you keep things super simple when it comes to forms - trust me, when you are woking on multiple forms on a site and they may become more complex you don't want to be stuck with a lot of code. So keep it simple and consistent and plan well ahead how you structure them.
To answer your question - you can use Rails Bootstrap form gem (that shall do for your purposes). It is easy to use and generates the HTML without having to code with overhead.
To answer specifically your question.
keep the form_for on the outside.
Here an example that may work for you (but again I would rather refer to the gem)
= form_for #magazine, :html => { :multipart => true } do |f|
.page-header
%h3 #{t('magazines.index.header-1')}
%p #{t('magazines.index.content-1')}
.col-md-6.col-sm-12.col-xs-12
%div.input-group
%span.input-group-addon #{t('magazines.index.title')}
= f.text_field :title, required: true, :class => "form-control"
.col-md-6.col-sm-12.col-xs-12
%div.input-group
%span.input-group-addon #{t('magazines.index.summary')}
= f.text_area :summary, :required => true, :rows => '4', :class => "form-control"
This is a simple haml snippet of one of our previous projects where we bothered to manually generate the form (as it was only for a single form). Hope this helps!
Replace the ".col-md-6.col-sm-12.col-xs-12" with the space you need. This is essentially how you place the fields next to each other.

One page on Bootstrap 3/Rails site isn't mobile responsive (the others work)

Thanks to the answer to my previous stackoverflow question, I was able to make the bootstrap 3 layout on my Ruby on Rails 4 app MOSTLY mobile-responsive.
However, my views/devise/sessions/new.html.erb page (aka the login page) isn't responsive. Instead, it looks like this on my iPhone 5s:
This is my new.html.erb file:
<div class="row">
<div class="col-xs-6">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "well"}) do |f| %>
<fieldset>
<legend>Log in</legend>
<%= f.input :email, label: 'Email' %>
<%= f.input :password, label: 'Password' %>
<% if devise_mapping.rememberable? -%>
<div class="field">
<%= f.input :remember_me, as: :boolean %>
</div>
</fieldset>
<% end -%>
<div class="actions">
<%= f.button :submit, "Log in" %>
</div>
<% end %>
<%= render "devise/shared/links" %>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6">
<center><h2>Signing in is easy and secure</h2>
<img src="http://static1.squarespace.com/static/54adc070e4b0c8f53bde4cf9/t/54ecfc98e4b0cc380c7af39a/1429903823657/?format=300w" /></center>
</div>
</div>
I added the viewport later on in an attempt to fix it, but it still didn't help.
Could the image be too large? If I have to, I can delete it, but would the gray box underneath the email and password fields still look overly skinny like that?
Here is the test deployment if you'd like to try it yourself:
https://wheels-registration-yamilethmedina.c9.io/
this was my comment suggestion and that helped to you!!!!
Just change the col-xs-6 to other class like container or container-fluid.This is because the col class divides gets the width as per the screen size . And we are forcing to make it col-xs-6 so this change happens to the screen.

<Rails> Page format falls apart when rendering

I created a sample app to play around with rails. I'm having trouble with the page format of my site when a page is rendered. The text fields moves out of place from it's previous position and the format is just ruined. Please see the site and just click the button and you'll see what I'm talking about.
Here is my controller:
class BooksController < ApplicationController
def new
#books = Book.new
end
def show
end
def create
#books = Book.new(book_params)
if #books.save
redirect_to new_book_path, :flash => { :success => "Book Added"}
else
render 'new'
end
end
def update
end
def edit
end
def destroy
end
private
def book_params
params.require(:book).permit(:title, :author, :genre, :no_of_items)
end
end
here my views/new.html.erb
<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>
<% flash.each do |key, value|%>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<%= form_for #books do |f| %>
<%= render 'shared/error_message' %>
<p>
<div class="fields">
<%= f.label :title, "Title:"%>
<%= f.text_field :title %><br/><br/>
</div>
<div class="fields">
<%= f.label :author, "Author:" %>
<%= f.text_field :author %><br/><br/>
</div>
<div class="fields">
<%= f.label :no_of_items, "No. of Items:" %>
<%= f.text_field :no_of_items%><br/><br/>
</div>
<div class="fields">
<%= f.label :genre, "Genre:" %>
<%= f.text_field :genre%><br/><br/>
</div>
<p>
<%= submit_tag "Add book"%>
</p>
</p>
<% end %>
</div>
</div>
Can anyone help me tell what's happening and a fix for this? Thanks.
ANSWER:
Hi everyone thanks for the advises but I found out through Rails 3: "field-with-errors" wrapper changes the page appearance. How to avoid this? thread how to fix this problem. I can't answer my question within 6 hours so I'll answer this after the restriction has ended.
Each label and input is being wrapped in an additional div element with the class field_with_errors.
You could give the field_with_errors class an display: inline-block; property, or try formatting your form like the example in the Bootstrap docs.
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
</form>
http://getbootstrap.com/2.3.2/base-css.html#forms
There is some unnecessary formatting you've added to the new.html.erb. One of rails' strength is the minimal amount of work created with helpers such as form_for
<h1>Books#new</h1>
<p>Find me in app/views/books/new.html.erb</p>
<% flash.each do |key, value|%>
<div class="flash <%= key %>"><%= value %></div>
<% end %>
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<%= form_for #books do |f| %>
<%= render 'shared/error_message' %>
<%= f.label :title, "Title:"%>
<%= f.text_field :title %>
<%= f.label :author, "Author:" %>
<%= f.text_field :author %>
<%= f.label :no_of_items, "No. of Items:" %>
<%= f.text_field :no_of_items %>
<%= f.label :genre, "Genre:" %>
<%= f.text_field :genre %>
<%= f.submit "Add book" %>
<% end %>
</div>
</div>
first you don't align your input fields correctly, i see some margin-left (for the first filed is 60px, for the second is 45px ...) so i suggest you to remove this css margin-left for your input and add this to your label:
label {
width:150px; /*Or however much space you need for the form’s labels*/
float:left;
}
this is a quick tutorial about how to align your fields
then after you submit your form with empty fields, rails will trigger some errors, and wrap each field (also label) which has error with div class="field_with_errors like this: <div class="field_with_errors"><input type="text"..... /></div> : this div will return your field to the next line so if you would that your fields still inline you just add this css to your css file :
.field_with_errors{
display: inline;
}
I found out through this thread how to fix this problem.