Need help migration to bootstrap.
bootstrap sound easy just go get all scss and samples to paste. But I don't know how to insert "#user, url: signup_path" into/or replace in bootstrap code to work in rails app.
html:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.email_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
</div>
</div>
Bootstrap code: from getbootstrap
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Updated:
bootstrap as follow:
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages', object: #user %>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<%= f.label :name %>
<%= f.text_field :name, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, class: 'form-control' %>
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<%= f.submit yield(:button_text), class: "btn btn-primary" %>
</div>
<% end %>
Something like this:
<%= form_for(#user, url: signup_path) do |f| %>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">#</span>
<%= f.input :name, input_html: {class: 'form-control'}, placeholder: 'Name' %>
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">#</span>
<%= f.input :email, input_html: {class: 'form-control'}, placeholder: 'Email' %>
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon3">#</span>
<%= f.password_field :password, input_html: {class: 'form-control'}, placeholder: 'Password' %>
</div>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
I hope you get the idea!
Related
This is my registration form which is using devise but for some reason, my CSS only affects the First_Name part and nothing else. On top of that, the First Name part looks slightly different from the other bars in terms of its border color. I did install bootstrap but I haven't had a problem like this on other pages so I don't think that's the issue.
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>
<div class="field input">
<%=f.label :First_Name%>
<%=f.text_field :fname, class:"form-control",:autofocus => true %>
</div>
<div class="field input">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field input">
<%= f.label :password %>
<% if #minimum_password_length %>
<em>(<%= #minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>
<div class="field input">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "off" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<%= render "devise/shared/links" %>
<style>
.input{
width: 25%;
text-decoration: none;
}
</style>
You have to apply .form-control class to input fields for appling Bootstrap style.
In your code only first name (fname) has .form-control - You have to add it to other input fields as well.
Example for email field:
<%= f.email_field :email, autofocus: true, autocomplete: "email", class:"form-control" %>
I am losing my mind, whatever I do my layouts keeps doing weird things.
I have a simple form code:
<div class="center jumbotron">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
<%= f.label t(:password) %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.label t(:first_name) %>
<%= f.text_field :first_name, class: 'form-control' %>
<%= f.label t(:last_name) %>
<%= f.text_field :last_name, class: 'form-control' %>
<%= f.label t(:student_id) %>
<%= f.text_field :student_id, class: 'form-control' %>
<%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
<% end %>
</div>
Which looks like
All I want to do is reduce width of inputs to about 25% (or 3 cols) while keeping responsive layout.
For example, when I try to wrap whole form in div with form-control class, then wrap every input+label in div with row class and another div with col-xs-3 class, inputs become inline and scale instead of placing one under another.
I expect that you probably were doing it correctly but you need to give each of the columns an offset so that it doesn't make each of them inline and use rows. See the bootstrap documentation here: http://getbootstrap.com/css/#grid-offsetting
It should probably look like
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
</div>
</div>
etc...
You can Try this Code for one element in your form
<div class="OneFormElement">
<div class="row">
<div Class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<%= f.label t(:email) %>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<%= f.text_field :email, class: 'form-control' %>
</div>
</div>
</div>
Full answer is #Kasunjith And #Stephen answer's combined.
#Kasunjith 's answer granted proper placement and #Stephen 's made sure that it's responsive on all devices.
Final code looks like this:
<div class="center jumbotron">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:password) %>
<%= f.password_field :password, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:first_name) %>
<%= f.text_field :first_name, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:last_name) %>
<%= f.text_field :last_name, class: 'form-control' %>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
<%= f.label t(:student_id) %>
<%= f.text_field :student_id, class: 'form-control' %>
</div>
</div>
<%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
<% end %>
</div>
Here is the link to Bootstrap documentation. custom column sizing
From the documentation:
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Your code can be rewritten as follows
<div class="center jumbotron">
<%= form_for(#user, url: signup_path) do |f| %>
<%= render 'shared/error_messages' %>
<div class="row">
<div class="col-md-3"> <!-- this can be changed as per your requirement -->
<%= f.label t(:email) %>
<%= f.text_field :email, class: 'form-control' %>
</div>
<div class="col-md-3">
<%= f.label t(:password) %>
<%= f.password_field :password, class: 'form-control' %>
</div>
</div>
<%= f.submit t(:sign_up_button), class: 'btn btn-lg btn-primary' %>
<% end %>
</div>
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>
I'm building a layout for my login page and am having problem getting my buttons to line up. I have used a custom class to center my username and password form, and would now like to have 2 equal sized buttons for log in and sign up underneath them. I tried achieving this with col that are half size of the parent, but so far they are just sized the same. Any help on what I'm doing wrong is appreciated.
html:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
<div class="col xs-2">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
</div>
css:
.btnstyle {
width:100%;
}
.centered {
float: none;
margin: 0 auto;
}
I tried to set up a fiddle, but ofc it won't work with rails tags...
figured it out, had a - missing and had to post them outside of the main col with an offset to center. Here's the final result:
<div class="col-xs-4 centered">
<%= form_tag sessions_path do %>
<div class="form-group">
<%= label_tag :email %>
<%= text_field_tag :email, params[:email], class:'form-control' %><br/>
<%= label_tag :password %>
<%= password_field_tag :password, nil, class:'form-control' %><br/>
</div>
</div>
<div class="col-xs-2 col-xs-offset-4">
<%= submit_tag "Log in", class:'btn btn-primary btnstyle' %>
</div>
<div class="col-xs-2">
<%= link_to 'Sign Up', new_user_path, class:'btn btn-primary btnstyle' %>
</div>
<% end %>
</div>
I'm trying to make a form with bootstrap-sass. I need to find the optimal configuration of bootstrap classes to make it look nice. It is not showing up the way I expect, specifically when the browser width is smaller than a certain size the spaces between labels and form fields collapse and it doesn't look good anymore. It would be ok if it only happens on small width, but that's not the case.
I would really appreciate some help with this,
really, what is the best way to format the form-horizontal with bootstrap?
Here's my code:
<form class="form-horizontal center" role="form">
<%= form_for #user do |f| %>
<div class="field">
<%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
<%= f.text_field :fname %>
</div>
<div class="field">
<%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
<%= f.text_field :lname %>
</div>
<div class="field">
<%= f.label :email, "Email:", class: "col-md-4 control-label" %>
<%= f.text_field :email %>
</div>
<!--div class="form-group" -->
<div class="field">
<%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
<%= f.text_field :comments %>
</div>
<div class="field">
<%= f.radio_button :attend, 'yes', :checked => true, class: "col-md-4 control-label" %>
<%= f.label :attend, 'I will attend.', :value => "yes" %><br />
<%= f.radio_button :attend, 'no', :checked => false, class: "col-md-4 control-label" %>
<%= f.label :attend, "I will not attend.", :value => "no" %>
</div>
<div class="field">
<%= f.check_box :workshop, class: "col-md-4 control-label" %>
<%= f.label :workshop, "Checkbox Description" %>
</div>
<div class="field">
<div class="col-md-4">
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
</div>
</div>
<% end %>
</form>
As you can see from commented out code, I first used form-group class, but it wasn't working well.
Again, the problem is that spaces between labels and text fields collapse when width of the browser is less than certain size. The labels, which are right-aligned, lose their alignment. Browser has to be almost full screen to show up correctly, which isn't right because there's plenty of space for it to show up correctly on smaller width.
I was following this guide http://getbootstrap.com/css/#grid
Edit: Added email field in the code, because it's of different size and easier to see the problem.
take a look at bootstrap v3 doc here http://getbootstrap.com/css/#forms-horizontal
and you don't need to add form tag since you are already using form_for
<%= form_for #user, :html => {:class => "form-horizontal center"} do |f| %>
<div class="form-group">
<%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :fname, class: "form-control" %>
</div>
</div>
<div class="form-group">
<%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :lname, class: "form-control" %>
</div>
</div>
<div class="form-group">
<%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
<div class="col-md-8">
<%= f.text_field :comments, class: "form-control" %>
</div>
</div>
<div class="radio">
<%= f.radio_button :attend, 'yes', :checked => true %> I will attend.
<br />
<%= f.radio_button :attend, 'no', :checked => false %> I will not attend.
</div>
<div class="checkbox">
<%= f.check_box :workshop %> Checkbox Description
</div>
<%= f.submit "Submit", class: "btn btn-default btn-primary" %>
<% end %>