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>
Related
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 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%>
I have a modal that is only rendered within the body tag, but it still appears stuck behind the fade.
Here is the code in my ERB:
<div class="modal fade add-video-popup" id="add-video-step-4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TESTING 1, 2, 3</i></p>
</div>
<div class="content">
<% if #family_tree %>
<%= simple_form_for([#family_tree, #video], :remote => true) do |f| %>
<div class="column">
<div class="f-row">
<%= f.input :title, label: "Title:" %>
</div>
<div class="f-row">
<%= f.input :description,label: "Description:" %>
</div>
<div class="f-row">
<%= f.input :circa, as: :datepicker, start_year: Date.today.year - 5, label: "Circa:" %>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<%= f.collection_select :user_ids, #family_tree.members.order(:first_name), :id, :first_name, {}, {multiple: true} %>
</div>
</div>
<%= f.button :submit, "Add Video", id: "video-submit" %>
<% end %>
<% end %>
</div> <!-- //content -->
</div> <!-- //modal fade -->
Here is the actual HTML generated:
<div class="modal fade add-video-popup in" id="add-video-step-4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="titles clearfix">
<h2>Upload a Video</h2>
<p><i>Step 1 of 2 - TESTING 1, 2, 3</i></p>
</div>
<div class="content">
<form accept-charset="UTF-8" action="/family_trees/1/videos" class="simple_form new_video" data-remote="true" id="new_video" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
<div class="column">
<div class="f-row">
<div class="control-group string required video_title"><label class="string required control-label" for="video_title">Title:</label><div class="controls"><input class="string required" id="video_title" name="video[title]" type="text"></div></div>
</div>
<div class="f-row">
<div class="control-group string required video_description"><label class="string required control-label" for="video_description">Description:</label><div class="controls"><input class="string required" id="video_description" name="video[description]" type="text"></div></div>
</div>
<div class="f-row">
<div class="control-group datepicker optional video_circa"><label class="datepicker optional control-label" for="video_circa">Circa:</label><div class="controls"><input class="datepicker optional hasDatepicker" id="video_circa" name="video[circa]" type="text"><input class="circa-alt" id="video_circa" name="video[circa]" type="hidden"></div></div>
</div>
<div class="f-row">
<label for="family">Family in this video:</label>
<input name="video[user_ids][]" type="hidden" value=""><select id="video_user_ids" multiple="multiple" name="video[user_ids][]"><option value="3">Jackie Lynn</option>
<option value="1">Marcamus</option>
<option value="2">Mike Green</option>
<option value="8">Very</option></select>
</div>
</div>
<input class="btn" id="video-submit" name="commit" type="submit" value="Add Video">
</form> </div> <!-- //content -->
</div>
I had read on other questions that it is the positioning of the modal, so I made sure it appears right before the footer tag and not nested within any other tag and I am still having this issue.
Thoughts?
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.
I am using bootstrap for my web application, and I have problem with validationmessagefor puting message state in correct position. Now I have use this example from this link, with this code:
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
Now code that I use:
<h4 class="form-signin-heading">Please sign in</h4>
<div class="control-group">
<div class="controls">
#Html.TextBoxFor(u => u.Username, new {placeholder="Username", #class="form-control username", id="inputError"})
<span class="help-inner">#Html.ValidationMessageFor(u => u.Username)</span>
</div>
<div class="controls">
#Html.PasswordFor(u => u.Password, new {placeholder="Password", #class="form-control password"})
#Html.ValidationMessageFor(u=> u.Password)
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
My code do this (also in fiddle: http://jsfiddle.net/4h5E5/1/):
But my disire is to put validate message in this position (like example in link):
Please check this JS Fiddle Link
HTML Code:
<!DOCTYPE html>
<body>
<div class="container">
<form class="form-signin form-horizontal" role="form">
<h4 class="form-signin-heading">Please sign in</h4>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="username" class="form-control username" placeholder="Username" required="autofocus" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="password" class="form-control password" placeholder="Password" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
</div>
</form>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript==================================================- ->
<!-- Placed at the end of the document so the pages load faster -->
</body>
I hope this is what you want to achieve.
If you have any other issue or if not solved, then please add a comment below.
Regards D.
Have you tried this? (untested)
<div class="controls">
<input type="text" id="inputError" class="pull-left">
<span class="help-inline pull-left">Please correct the error</span>
</div>
ps.would be great if you make a fiddle.
Use style = "display:inline" for EditorFor and ValidationMessageFor both, as below:
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2"})
<div class="col-md-9">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control", style = "display:inline" } })
#Html.ValidationMessageFor(model => model.UserName, "*", new { #class = "text-danger", style = "display:inline" })
</div>
</div>