I'm using the bootstrap datepicker plugin for two input fields inside a simple form:
<div class="row">
<div class="col-lg-6">
<div class="form-group" id="datepickerContainer">
<i class="fas fa-calendar-alt"></i>
<%= f.label "From" %>
<%= f.input :from, :as => :string, label: false, :input_html => { :class => "datepicker", :id=>"datepickerContainer" } %>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" id="datepickerContainer">
<i class="fas fa-calendar-alt"></i>
<%= f.label "Until" %>
<%= f.input :until, :as => :string, label: false, :input_html => { :class => "datepicker" } %>
</div>
</div>
</div>
Currently as you can see above I have a font awesome icon next to each label... and I would like to move the awesome icon next to the each input like this:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
</div>
So I'm doing this:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-calendar-alt"></i></span>
</div>
<%= f.input :from, :as => :string, label: false, :input_html => { :class => "datepicker", :id=>"datepickerContainer" } %>
</div>
But I'm getting this results:
Any idea what I'm doing wrong?
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'm using simple_form in my rails 4.2 project. I'm having some trouble with the row/field alignment following a validate with the error display. Any field that validates does not vertically align with the failed validated fields.
<%= simple_form_for(#creditrequest) do |f| %>
<%= f.error_notification %>
<br>
<div class="form-actions creditrequest_form">
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :account, as: :string, label: "Account #", placeholder: "000-012345" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :gldsname, label: "GLDS Name", placeholder: "Bob Wehadababyitsaboy" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :contact_no, label: "Contact No", placeholder: "(989) 555-1212" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-2 col-centered">
<%= f.input :credit_amount, as: :string, label: "Credit Amount", placeholder: "$", class: "textarea_oneline" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :package, placeholder: "PLV" %>
</div>
<div class="col-sm-2 col-centered">
<%= f.input :reason, placeholder: "Credit for Service Issue" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :detail, as: :text, label: "Why are we issuing a credit?" %>
</div>
</div>
<div class="row row-centered">
<div class="col-sm-6 col-centered">
<%= f.input :tech, placeholder: "AN" %>
<br>
<br>
<%= f.button :submit, "Submit", class: "btn btn-custom" %>
</div>
</div>
</div>
<% end %>
At all Simple Form is not source of this problem. The problem is you styles, and you need first set line height and vertical alignment for you blocks:
.form-actions.creditrequest_form {
> .row.row-centered {
line-height: %{Parent-value}px;
> .col-sm-2.col-centered {
display: inline-block; /* can use vertical alignment */
vertical-align: top; /* pull all to top */
line-heigth: %{child-value}px;
}
}
}
Update: Consider that .error is added on error and it can add not right styles.
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>
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.