I am trying to integrate Ruby code into the bootstrap search bar.
Here's my code thus far:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
# Search function
<%= form_tag deals_path, :method => "get" do %>
<%= text_field_tag :search, params[:search], placeholder:"Search a deal name %>
<%= submit_tag "Search", class: "btn btn-default" %>
<%=form_tag deals_path,{:method=>'get', class:"navbar-form navbar-left", role:"search"} do%>
<div class="form-group">
<%=text_field_tag :search,"",class:"form-control",placeholder:"Search"%>
</div>
<%=submit_tag 'Seach' ,class:"btn btn-default "%>
<%end%>
Related
I have this signup page snippet that I want to use. My issue is I am using devise with my rails app so I'm not sure how to replace the fields in the snippet with the ruby code while retaining styles.
This is the code from devise in my view
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field">
<%= f.label :email, :class=>'formlabel' %><br />
<%= f.email_field :email, autofocus: true %>
</div>
<div class="field">
<%= f.label :password, :class=>'formlabel' %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field">
<%= f.label :password_confirmation, :class=>'formlabel' %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<%= render "teachers/shared/links" %>
and this is the snippet
<div class="container-fluid stylish-form">
<h2 class="text-center">Stylish Signup Page Using Bootstrap</h2>
<div class="row mar20">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="inner-section">
<form method="POST" action="https://google.co.in">
<div class="mar20 inside-form">
<h2 class="font_white text-center">SIGN UP</h2>
<ul>
<li class="icon-holder dsp-flex">
<i class="fa fa-facebook "></i>
</li>
<li class="icon-holder dsp-flex">
<i class="fa fa-twitter "></i>
</li>
<li class="icon-holder dsp-flex">
<i class="fa fa-instagram "></i>
</li>
</ul>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil "></i></span>
<input type="text" class="form-control" name="text" placeholder="First Name...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope "></i></span>
<input type="email" class="form-control" name="text" placeholder="Email...">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock "></i></span>
<input type="password" class="form-control" name="text" placeholder="Password...">
</div>
<div class="footer text-center">
Get Started
</div>
</div>
</form>
</div>
</div>
</div>
<h2 class="text-center font_white">Thank You For Visiting This Snippet</h2>
</div>
Simply replace your the <input> tags in your snippet. with the <%= f.email_field :email, autofocus: true %> on the original forms. Add any other missing options like placeholders and such.
Compare the resulting HTML, ultimately it will be the same.
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 %>
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>
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>
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>