Adding a RoR registration script into a bootstrap modal - css

so i am trying to create a signup script within a Bootstrap Modal
but it fails out.
the same script works on a page of its won, just not sure why it doesnt work here.
is there something special about using bootstrap?
Here is the Error:
Below is the Modal Contents
<div class="modal fade" id="register-modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Register</h4>
</div>
<%= form_for(#user) do |f| %>
<div class="modal-body">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<%= f.text_field :first_name, :placeholder => "First name" %>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<%= f.text_field :last_name, :placeholder => "Last name" %> </div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<%= f.email_field :email, :placeholder => "Email" %>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<%= f.password_field :password, :placeholder => "Password" %>
</div>
</div>
<div class="modal-footer">
<%= f.submit "Create an account", class: "btn btn-primary btn-submit" %>
</div>
<% end %>
</div>
Here is my Users controller
class UsersController < ApplicationController
def new
#user = User.new
end
end
and the user model
class User < ApplicationRecord
has_secure_password
end
and finally my db:migrate file for my users
class CreateUsers < ActiveRecord::Migration
def change
create_table :users do |t|
t.string :first_name
t.string :last_name
t.string :email
t.string :password_digest
t.timestamps
end
end
end
One more bit of is my routes
Rails.application.routes.draw do
root 'home#index'
get 'signup' => 'users#new'
resources :users
end

In Ruby you can reference a instance variable even if it has not been initialized:
irb(main):001:0> #foo
=> nil
Which is exactly what is happening here. If you want to use the same form on a bunch of actions without worrying if the controller sets the #user instance variable you can just use the || (or)
operator:
<%= form_for(#user || User.new) do |f| %>
# ...
<% end %>

Related

Rails 5: form_for select field tag with select class

I'm currently trying to implement an select_tag, the problem I'm facing is that every css element works, except the select option. Somehow the bootstrap stylesheet gets called when I use f.select :home_type, [["Room", "Room"]], class: 'add-listing__input'
This stylesheet gets called and only select works
http://localhost:3000/assets/triptip-assets.min.self-3157b4719675b23587e706840e28dab5a7506a2794b67521ade419a505a34070.css?body=1
When I use for example f.text_field everything works and this stylesheet gets called
http://localhost:3000/assets/style.self-6fdbeaf8dfea504b6f923ccefbf5f6a7f370c6436cf98feefac201fc92c78f83.css?body=1
EDIT
Here is my form
<%= form_for #room do |f| %>
<div class="add-listing__form-content">
<div class="row">
<div class="col-md-6">
<label class="add-listing__label">
Home Type:
</label>
<%= f.select :home_type, [["Wohngebäude", "Wohngebäude"], ["Bürogebäude", "Bürogebäude"], ["Haus", "Haus"], ["Geschäft", "Geschäft"]], class: 'add-listing__input js-example-basic-multiple' %>
</div>
<div class="col-md-6">
<label class="add-listing__label">
Vacancy Type:
</label>
<%= f.select :vacancy_type, [["Leer", "Leer"], ["Voll", "Voll"]], class: 'add-listing__input js-example-basic-multiple' %>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="add-listing__label">
Accomodate:
</label>
<%= f.number_field :accomodate, id: "amount", placeholder: "Für wie viele Personen?", class: "add-listing__input" %>
</div>
<div class="col-md-6">
<label class="add-listing__label">
Abrissgerüchte:
</label>
<%= f.text_field :rumors, id: "rumors", placeholder: "Abrissgerüchte?", class: "add-listing__input" %>
</div>
</div>
</div>
<% end %>
You should define class in select field in this way:
<%= f.select(:vacancy_type, [ ... ], {}, { class: 'my_style_class' }) %>

Css bootstrap forms (rails newbie)

I was trying to add some styling into my user_form using css bootstrap.
This is how it looks at the minute:
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.email_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
</div>
</div>
And I was trying to put it in the form of:
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<div class="form-group">
<label for="exampleInputConfirmPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputConfirmPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
My problem is that I dont know how to add the functionality to the css form. How can I do so?
Thanks in advance!
------ EDIT 1 -------
In order to clarify what is happening:
my _user_form.html.erb at the minute looks like the first set of code. However when I delete it and replace it with the second set of code nothing works.
Schema.rb
ActiveRecord::Schema.define(version: 20161210221810) do
create_table "users", force: :cascade do |t|
t.string "name"
t.string "email"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.string "password_digest"
t.string "remember_digest"
end
end
Just add a class to the label:
<%= f.label :name, class: "my_class" %>
at the first you need to use that include your form items, and then in javascript send params to your backend! for example
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

Bootstrap col-sm-offset-2 does not align button in form

Why doesn't the col-sm-offset-2 line up button 'two' with the col-sm-2 labels above it in this form?
I have a lame fix for it using the empty label (see button 'one'), but I want to understand how to use cleaner code and make this right so all my forms don't have the kludge label in them for buttons.
<form class="form-horizontal" role="form" action="/company/create" method="post">
<div class="form-group">
<%= label_tag(:name, 'Company name:', :class => 'control-label col-sm-2') %>
<div class="col-sm-4">
<%= text_field_tag(:name, #company.name, :class => 'form-control') %>
</div>
</div>
<div class="form-group">
<%= label_tag(:category, 'Category:', :class => 'control-label col-sm-2') %>
<div class = 'col-sm-4'>
<%= collection_select(nil, :category_id, Category.all, :id, :description, :include_blank => 'select') %>
</div>
</div>
<div class="form-group">
<%= label_tag(:x, '', :class => 'col-sm-2') %>
<div class='col-sm-2'>
<button type="submit" class="btn btn-primary">one</button>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary col-sm-offset-2">two</button>
</div>
</form>
Step 1: build a DIV around your button.
Step 2: give that DIV the class of "col-sm-2 col-sm-offset-2".
Step 3: place your BUTTON inside that DIV
Step 4: give me feedback if that solved your issue.
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<button type="submit" class="btn btn-primary">two</button>
</div>
</div>
Try this one:
<div class="form-group">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn-primary">two</button>
</div>
</div>

Rails contact form alignments

So I have this contact form in rails
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :phone %><br />
<%= f.text_field :phone %>
</div>
<div class="field">
<%= f.label :description %><br />
<%= f.text_area :description, :size=>"30x3" %>
</div> <br/>
<div class="actions">
<%= f.submit "Submit" %>
</div>
<% end %>
I want my form to utilize full page, i.e. I want the fields till phone to be on the left side and the description as a text area on the right horizontally.
Something like this
I am using bootstrap with the rails.
I tried with col-md-4 for 1 part and col-md-8 for another. doesn't fix that.
Please help.
From this template i made here:
http://www.bootply.com/XAMvtjjoQw
You can adapt it to ruby like this:
<form>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<%= f.text_field :name, :class => "form-control" %>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<%= f.text_field :email, :class => "form-control" %>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<%= f.text_field :phone, :class => "form-control" %>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputFile">File input</label>
<%= f.text_area :description, :class=>"form-control", :size=>"30x3" %>
</div>
</div>
</form>
for a pure HTML layout you can do this:
<form action='' method='post'>
<div class='row'>
<div class='col-md-2'>
<div class='control-group'>
<label for="name">Name</label>
<input id="name" type='text' name='name' value='' class='form-control'>
</div>
<div class='control-group'>
<label for="email">Email</label>
<input id="email" type='text' name='email' value='' class='form-control'>
</div>
<div class='control-group'>
<label for="phone">Phone</label>
<input id="phone" type='text' name='phone' value='' class='form-control'>
</div>
</div>
<div class='col-md-10'>
<div class='control-group'>
<label for="description">Description</label>
<textarea id="description" name='description' class='form-control' rows='4'></textarea>
</div>
<div class='control-group'>
<br><input type='submit' name='submit' value='Submit' class='btn btn-sm btn-info'>
</div>
</div>
</div>
</form>

bootstrap form-group rows not working

I'm not sure what I'm doing wrong here. The form-group class should act like a row in the form-horizontal form, correct? Here's the code. It's an add/drop page for fantasy football.
<h2>Add/Drop Player</h2>
<div class="container">
<%= form_tag(slot_do_add_drop_path(#slot), method: 'post', :html => {:class => 'form-horizontal', :role => 'form'}) do %>
<div class="form-group">
<div class="col-sm-2">Player to Drop</div>
</div>
<div class="form-group">
<div class="col-sm-2"><%= #slot.player.display_name %> - <%= #slot.player.position %></div>
</div>
<div class="form-group">
<div class="col-sm-2">Add Player</div>
</div>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_qbs, p_id: 'qb_id', prompt: 'Select QB'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_wrs, p_id: 'wr_id', prompt: 'Select WR'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_rbs, p_id: 'rb_id', prompt: 'Select RB'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_tes, p_id: 'te_id', prompt: 'Select TE'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_ks, p_id: 'k_id', prompt: 'Select K'}%>
<%= render partial: "free_agent_select", locals: {free_agents: #free_agents_defs, p_id: 'def_id', prompt: 'Select DEF'}%>
<div class="form-group">
<div class="col-sm-2">
<%= submit_tag 'Submit', name: 'add_drop_player', class: 'form-control'%>
</div>
</div>
<% end %>
</div>
The partial free_agent_select
<div class="form-group">
<div class="col-md-2">
<%= collection_select :player, p_id, free_agents, :id, :display_name, {:prompt => prompt}, {:class => 'form-control'} %>
</div>
</div>
You should use a row class for each new "row" to solve overlap problem like this.
<div class="form-group row">
<div class="col-sm-2">Player to Drop</div>
</div>
It should be noted that form-group won't wrap floated elements. In this instance all elements with .col-xx-xx add a float to it's container. Adding the class name of .row simply adds the clear-fix of having a ::before and ::after element added to the element (in this case a div) and then applying the css property of clear:both to those elements. You do not need to have the class name of .row added to the parent element you can simply add .clearfix as a class. As it is purely semantics the decision is up to you.
<div class="form-group">
<label for="firstName">First Name</label>
<input id="firstName" name="firstName" class="form-control" />
</div>
<div class="form-group clearfix">
<div class="col-sm-3">CLEAR INFORMATION</div>
<div class="col-sm-3"><button class="btn btn-default" type="submit">SUBMIT</button></div>
</div>
I had a similar problem and fixed it using Zanderi's suggestion (clearfix).
However, when I changed to bootstrap 4.0 I found out that it all worked fine by default, so my suggestion: leave default code, like:
<form class="dropdown-menu dropdown-menu-right" style="padding: 15px">
<div class="form-group">
<label>Nombre</label>
<input class="form-control" id="name" placeholder="Nombre">
</div>
<div class="form-group">
<label>Imagen</label>
<input class="form-control" type="file" id="image">
</div>
<button type="submit" class="btn btn-default pull-right">Guardar</button>
</form>
and use bootstrap 4.0.

Resources