I'm trying to reformat the simple default devise login screen with twitter bootstrap simple form and I'm having major issues.
Here is my code:
<h2>Sign in</h2>
<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => "form-horizontal"}) do |form| %>
<%= form.input :email, :autofocus => true %>
<%= form.input :password %>
<%= form.input :remember_me, :as => :boolean if devise_mapping.rememberable? %>
<%= form.button :submit, 'Sign in', :class => 'primary'%>
<% end %>
<%= render "links" %>
I can get the spacing between the labels and input fields to be correct if I add
.form-horizontal .controls {
margin-left: 160px;
}
to my application.css file, but I don't see this anywhere in their sample app here
https://github.com/rafaelfranca/simple_form-bootstrap
and am really confused where the proper formatting is coming from.
I have almost the same code as this guy https://github.com/rafaelfranca/simple_form-bootstrap/issues/6 but his code is older I think. I am using simple form 2.0.2 and I installed bootstrap with twitter-bootstrap-rails 1.4.3. I also installed and uninstalled a couple other twitter bootstrap gems if theres any chance that's messing things up.
Edit: here is my produced code if that helps
Sign in
<form accept-charset="UTF-8" action="/admins/sign_in" class="simple_form form-horizontal" id="new_admin" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="xxx" /></div>
<div class="control-group email optional"><label class="email optional control-label" for="admin_email">Email</label><div class="controls"><input autofocus="autofocus" class="string email optional" id="admin_email" name="admin[email]" size="50" type="email" value="" /></div></div>
<div class="control-group password optional"><label class="password optional control-label" for="admin_password">Password</label><div class="controls"><input class="password optional" id="admin_password" name="admin[password]" size="50" type="password" /></div></div>
<div class="control-group boolean optional"><label class="boolean optional control-label" for="admin_remember_me">Remember me</label><div class="controls"><input name="admin[remember_me]" type="hidden" value="0" /><label class="checkbox"><input class="boolean optional" id="admin_remember_me" name="admin[remember_me]" type="checkbox" value="1" /></label></div></div>
<input class="btn primary" name="commit" type="submit" value="Sign in" />
</form>
Forgot your password?<br />
Wow that was painful. It turns out there is an error in the twitter-bootstrap-rails gem https://github.com/seyhunak/twitter-bootstrap-rails/issues/324
If you have this problem I recommend uninstalling that gem and everything associated with it and following these directions http://ruby.railstutorial.org/chapters/filling-in-the-layout?version=3.2#sec-custom_css
to get started. Summary of link:
Install 'bootstrap-sass' gem
Add a custom.css.scss file with "#import 'bootstrap';" and you're good to go.
Related
A default, scaffolded Rails 5 form will 'submit' if a desktop user presses the Enter button while the cursor is in a non-textarea form field. (If in a textarea field of course pressing Enter just inserts a newline into the field.)
When the form is viewed on an iphone, when you are editing a non-textarea field (such as a name) there is a Go button on the keyboard which is expected to submit the form.
The question: How does one enable that behavior by default on a Rails 5 app, eg, create forms so that the "Go" button on an iphone will submit the form the user is working on?
INCORRECTLY MARKED AS DUPLICATE FOR A GENERIC IOS QUESTION THAT HAS NOTHING TO DO WITH RAILS or RAILS FORMS. (Rails has myriad special issues such as default scaffolding of forms, authenticity tokens, etc. and that is what this question is about.)
Here is a sample form in HAML produced by simple_form:
.row
%h4 #{resource_name.to_s.humanize} sign in
= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
.row
.row.form-inputs
%div.col.l4.m6.s12
= f.input :email, required: false, autofocus: true
%div.col.l4.m6.s12
= f.input :password, required: false
%div.col.l4.m6.s12
= f.input :remember_me, as: :boolean if devise_mapping.rememberable?
.row
.form-actions
= f.button :submit, "Log in"
.row
= render "#{resource_name.to_s}s/shared/links"
Here is the form html:
<form novalidate="novalidate" class="simple_form new_admin" id="new_admin" action="/admins/sign_in" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="authenticity_token" value="XXXXXXX" /><div class='row'>
<div class='row form-inputs'>
<div class='col l4 m6 s12'>
<div class="input-field email optional admin_email">
<input class="string email optional" autofocus="autofocus" type="email" value="" name="admin[email]" id="admin_email" />
<label class="email optional" for="admin_email">Email</label></div>
</div>
<div class='col l4 m6 s12'>
<div class="input-field password optional admin_password">
<input class="password optional" length="128" type="password" name="admin[password]" id="admin_password" />
<label class="password optional" for="admin_password">Password</label></div>
</div>
<div class='col l4 m6 s12'>
</div>
</div>
</div>
<div class='row'>
<div class='form-actions'>
<input type="submit" name="commit" value="Log in" class="waves-effect waves-light btn" data-disable-with="Log in" />
</div>
</div>
</form>
Using
= f.button :button
in simple_form forces simple_form to use the button tag (instead of input) which seems to eliminate any issues with the IOS keyboard 'Go' button.
That said, I had some trouble reproducing the original issue several days later, so it's possible using the input tag works fine too under most circumstances, but I've switched to using :button just to be sure.
Is it possible to have the checkbox labels on the left like the others, and the checkbox on the right like the other inputs with a horizontal form?
My current setup
It looks pretty awful.
EDIT:
<%= simple_form_for :apartment, :html => {:multipart => true, :class => 'form-horizontal'}, wrapper: :horizontal_form do |f| %>
<%= f.input :pets, as: :boolean, label: 'Husdyr tilladt' %>
<% end %>
which generates the following html in the view:
<div class="form-group boolean optional apartment_pets">
<div class="checkbox"><input value="0" type="hidden" name="apartment[pets]">
<label class="boolean optional" for="apartment_pets"><input class="boolean optional" type="checkbox" value="1" name="apartment[pets]" id="apartment_pets">
Husdyr tilladt
</label>
</div>
</div>
You can add pull-right to the class of your checkbox element like so:
<input name="uh" id="uhhuh" type="checkbox" class="pull-right" />
Updated answer with user provided code:
<div class="form-group boolean optional apartment_pets">
<div class="checkbox"><input value="0" type="hidden" name="apartment[pets]">
<label class="boolean optional" for="apartment_pets">Husdyr tilladt</label>
<input class="boolean optional" type="checkbox" value="1" name="apartment[pets]" id="apartment_pets" class="pull-right">
</div>
</div>
I never used simple_form but from browsing the documentation, it looks like you should use a combination of :label => false and :inline_label => true to position your label.
Using Rails 4, Simple_Form and Bootstrap 3, I am trying to get my output HTML look like this to work with some front end styling:
<div class="checkbox">
<input value="0" type="hidden" name="member[remember_me]">
<label class="boolean optional" for="member_remember_me">
<input type="checkbox" value="">
<i class="input-helper"></i>
Keep me signed in
</label>
</div>
In my form, I have this:
<%= f.input :remember_me, class: 'checkbox inline', type: 'checkbox', as: :boolean if devise_mapping.rememberable? %>
And I cannot figure out how to get the image tag to show up inside the input field. What I get when the form is generated is this (missing the image tag):
<div class="checkbox">
<input value="0" type="hidden" name="member[remember_me]">
<label class="boolean optional" for="member_remember_me">
<input class="boolean optional" type="checkbox" value="1" name="member[remember_me]" id="member_remember_me">Remember me
</label>
</div>
I've tried this block that I thought should do it, but alas, no:
<%= f.input :remember_me, class: 'checkbox inline', type: 'checkbox', as: :boolean if devise_mapping.rememberable? do %>
<i class="input-helper"></i>
<% end %>
Any suggestions? Do I need to write a custom wrapper to get the image tag to show?
One option to put content inside any rails tag is to use
"#{image_tag('filename.png')}".html_safe
in place of the text, or using raw().
I have a form created using Simple Form, as such
<%= simple_form_for #organisation do |f| %>
<div class="form-inputs">
<%= f.association :causes, as: :check_boxes %>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
The page works fine when I use a browser, but when I try to check this with Capybara, such as:
check('organisation_cause_ids_1')
And have tried many variations of this e.g.
find(:xpath , '//*[#id="organisation_cause_ids_1"]').set(true)
find("organisation_cause_ids_1").check
These always give an error:
Failure/Error: check('organisation_cause_ids_1')
Capybara::ElementNotFound:
Unable to find checkbox "organisation_cause_ids_1"
The HTML generated by Simple Form is:
<div class="input check_boxes optional organisation_causes">
<label class="check_boxes optional">Causes</label>
<span class="checkbox">
<label for="organisation_cause_ids_1" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_1" name="organisation[cause_ids][]" type="checkbox" value="1" />Cause A</label>
</span>
<span class="checkbox">
<label for="organisation_cause_ids_2" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_2" name="organisation[cause_ids][]" type="checkbox" value="2" />Hunger</label>
</span>
...
Edit: The problem was due to the lazy loading of the 'Causes' I created with the factories. They weren't being created so the page had no checkboxes.
Try with this
find_by_id('organisation_cause_ids_1').find("checkbox[value='1']").select_option
or maybe with this
find(:css, ".check_boxes[value='1']").set(true)
Im trying to use css to make all the fields for my form display on one line. It's part of the header nav on my page so it is important that it shows on one line instead of multiple lines.
Here's my header code at the moment.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="/">Bandini</a>
<div class="container nav-collapse">
<ul class="nav">
<li><%= link_to "Clients", "/clients" %></li>
<li><%= link_to "Jobs", "/jobs" %></li>
</ul>
<ul class="user_nav">
<%= render :partial => "sessions/manager" %>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The <%= render :partial => "sessions/manager" %> part points to a partial which displayes another partial depending on the users login state.
If they are logged out, then it displays the login form and if they are logged in then it shows th currrent users email adress and a signout link.
Here's my login form.
<%= simple_form_for("user", :url => user_session_path, :html => {:id => "sign_in", :class => 'form-inline' }, :remote => true, :format => :json) do |f| %>
<%= f.input :email, :placeholder => 'Email' %>
<%= f.input :password, :placeholder => 'Password' %>
<%= f.submit 'Login' %>
<%= link_to "Forgot your password?", new_password_path('user') %>
<% end %>
The form utilizes ajax and the simple_form gem for all the markup.
Ive tried playing around in Googles element tools and adding display: inline; to all of my input fields but no such luck.
Can anyone assist or point me in the right direction?
Edit: HTML generated..
<ul class="user_nav">
<form accept-charset="UTF-8" action="/users/sign_in" class="simple_form form-inline" data-remote="true" id="sign_in" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="fN0oKIlpnhS0WLZpKQafln+182IT1ONVuDP0eRtT8fg=" /></div>
<div class="control-group email required"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><div class="controls"><input class="string email required" id="user_email" name="user[email]" placeholder="Email" size="50" type="email" /></div></div>
<div class="control-group password required"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><div class="controls"><input class="password required" id="user_password" name="user[password]" placeholder="Password" size="50" type="password" /></div></div>
<input name="commit" type="submit" value="Login" />
Forgot your password?
</form>
</ul>
The reason display: inline; on your inputs is not working is because simple_form by default wraps a div tag around every input. There are two ways to fix this problem:
Create a custom wrapper for simple_form
https://github.com/plataformatec/simple_form#the-wrappers-api
Set both your inputs and the surrounding div to be inline-block:
.user_nav div, .user_nav input, .user_nav input[type="submit"] {
display: inline-block;
}
While the .user_nav input css style theoretically should not be necessary, it helps to specify it just in case there is some other CSS rule somewhere setting inputs to block. If you're sure that inputs are behaving normally, then you should be able to remove the second part of the CSS definition above.
By what documentation says http://twitter.github.com/bootstrap/components.html#navbar
Just add navbar-form class to your form and pull-left or pull-right
Also you should place it inside a li tag since you are placing it inside a ul