Rails 3.2
Bootstrap 3
In my view (app/views/users/password_expired/show.html.slim), I have:
- content_for :page_header do
= t('users.passwords.create_password')
= form_for(resource, as: resource_name, url: [resource_name, :password_expired], html: {method: :post, class: "form-horizontal new_user"}) do |f|
.form-horizontal-column.wide
.form-group
= devise_error_messages!
.form-group style="width: 600px"
= f.label :current_password, t('users.passwords.current_password')
= f.password_field :current_password
.form-group style="width: 600px"
= f.label :password, t('users.passwords.new_pass')
= f.password_field :password
.form-group style="width: 600px"
= f.label :password_confirmation, t('users.passwords.confirm_new_password')
= f.password_field :password_confirmation
div= f.submit t('users.passwords.change_my_password'), :class => "btn btn-primary btn-lg"
.form-horizontal-column.shared-links
I was expecting to see some padding, in between the labels/input fields, and the left side of the form, but I don't have any. It seems all the other forms are working fine.
How can I added some padding, to the left of the form-group, without modifying the bootstrap style, as the latter is working everywhere else?
Along with form-group, you can add some-css-class:
.form-group.some-css-class
Add the some-css-class in the label, if needed:
f.label :password, t('users.passwords.new_pass'), class: "some-css-class"
and then define it's style
.some-css-class {
/* define your margin/padding style */
}
And check if it works according to your spec...
Related
Building a Rails 3.1 app Ruby 1.9 with Devise for user authentication.
Since i'm using Devise to authenticate users I used jquery UI tabs display in the users/edit view. I have one tab to display form for user profile settings and and another for user security settings.
Problem is when i click submit to update either profile or security information it attempts to submit the forms for both. I have the submit buttons set up for each tab separately. How can i set this up so that i can submit the forms on each tab individually?
My users/edit.html.erb file
div id="tabs">
<ul id="user-config-tabs">
<li>Profile Settings</li>
<li>Security Settings</li>
</ul>
<div id="profile-tab"> <!-- Start security settings tab info-->
<%= render 'profilesettings'%>
</div>
<div id="security-tab"> <!-- Start Profile settings tab info-->
<%= render 'securitysettings'%>
</div>
</div>
Profile settings PArtial
<h3 style = "text-align: left">Profile Settings</h3>
<div class="row">
<p id="privacy"><%=link_to "privacy policy", privacy_path%></p>
<div class="span6 offset3">
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
<fieldset>
<legend>General Information</legend>
<div><%= f.label "First Name" %>
<%= f.text_field :name, :autofocus => true %>
<%= f.label "Last Name" %>
<%= f.text_field :last_name, :autofocus => true %>
<%= f.label "Age" %>
<%= f.text_field :age, :autofocus => true%>
<%= f.label "Gender" %>
<%= f.select :gender, User::GENDER_TYPES, prompt: 'Select'%>
</div>
</fieldset>
<div><%= f.submit "Update", class: "btn btn-large btn-primary" %></div>
<% end %>
</div>
</div>
Can't you just let the whole form submit but then only use the information that you want to ?
If you dont want the page to submit then I would use ajax to submit the form and serialize only what you need. For example:
$.ajax({
url: "/post_path",
type: 'POST',
cache: false,
async: false,
data: $("#security_form").serialize(),
success: function(data){
if(data.valid == "true"){
$('#notice').html("Updated succesfully").slideDown();
}else{
$('#errors').html(data.errors).slideDown();
}
}
});
Then you can handle this in the controller.
I have a Zurb Foundation simple form with one field (:description) being a text area. I want the text area to be 10 rows deep but it appears as 2 rows. Anyone know how to change this?
<div class="row">
<div class="large-4 large-centered columns">
<%= simple_form_for(#venue) do |f| %>
<fieldset>
<%= f.input :name %>
<%= f.input :url %>
<%= f.input :street %>
<%= f.input :city %>
<%= f.input :state %>
<%= f.input :description, as: :text, :input_html => { :cols => 5, :rows => 10 } %>
<%= f.submit "Submit", class: "button small radius" %>
</fieldset>
<% end %>
</div>
</div>
Since you are using bootstrap, default properties of bootstrap applies to your input textarea. It causes the problem. I had the same problem but, with columns.
You can overcome this problem by two solutions:
1.) Create a class and specify the height and width to be auto. Use the class wherever required.
Create this class in your application.css or any css file.
.test
{
width: auto;
height: auto;
}
Now use this class in your ruby code.
<%= f.input :description, as: :text, :input_html => { class: 'test', :cols => 5, :rows => 10 } %>
Since you have explicitly specified the width and height to be auto, the bootstrap's textarea width, height will be overrided by the local class 'test' width and height.
Hence :cols => 5, :rows => 10 properties will be set.
2.) Modify the input textarea properties in your bootstrap css file.
Change the height or width of input textarea to auto to avoid confusions or set it to a standard pixel if you are going to use the same width and height everywhere.
the class assignment doesn't work , try this instead
=f.input :description, label: false, :as => :text, :input_html => { :rows => 7 , :style => 'width: 100%'}
Works gre8 for me.!
I am running into issues trying to separate a form from a view into a partial. I want to use the same form for the new and edit views. These are both on the same page. The new model form is at the top of the page and uses a variable that I set in the controller.
<%= form_for #new_hire do |f| %>
<%= render :partial => 'new_hire_requests/form', :locals => {:f => f} %>
<% end %>
I then have a partial for the pending approvals that gets rendered by another partial
<%= render :partial => 'pending_approval', :collection => #pending_approval %>
And inside the pending approval partial I have this
<%= form_for pending_approval do |f| %>
<%= render :partial => 'new_hire_requests/form', :locals => {:f => f} %>
<% end %>
This is throwing an error
undefined method `new_hire_request_path' for #<#<Class:0x0000010488ac98>:0x0000010223ffc0>
Is there a way to re use the form code for both a new and edit form on the same page?
Controller Logic
#new_hire = NewHireRequest.new
#new_hire_requests = current_user.new_hire_requests
#pending_approval = #new_hire_requests.select{|p| p.status == 'pending_hr_approval' || p.status == 'pending_exec_approval'}
Partial code
<%= render 'shared/error_messages', object: f.object %>
<fieldset class="first">
<%= f.label :first_name, "First Name" %>
<%= f.text_field :first_name %>
</fieldset>
<fieldset>
<%= f.label :last_name, "Last Name" %>
<%= f.text_field :last_name %>
</fieldset>
<%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>",
class: "button_green" %>
add resources new_hire_requests in the routes and get done with it .
I have _form.html.erb
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :password %>
<%= f.password_field :password %>
Now if I render this form in homepage, HTML code should be:
<label for="session_name">Name</label>
<input id="session_name" name="session[name]" size="30" type="text">
...
If I change my _form.html.erb to:
<%= f.label :name %>
<%= f.text_field :name, disabled: true %>
...
HTML code should be:
...
<input disabled="disabled" id="session_name" name="session[name]" size="30" type="text">
...
But, I don't want to change my _form.html.erb, so how can I pass the disabled: true into my form? I tried to use render partial: but don't know syntax.
I just learn Ruby on Rails for 2 weeks, so please help me.
i donno why u wnt to do so but u can solve the prob by this method. Try doing-
in application helper, add method -
def add_disabled
#i suppose that u want the field to be disabled in the users controller for edit action but not for other controllers or actions
return "disabled='disabled'" if params[:controller] == "users" and params[:action] == "edit"
end
in _form.html.haml
= f.text_field :name, #{add_disabled}
this will call the helper method and return "disabled='disabled'" depending upon the controller and action
I have a two models, Group and User
User belongs_to Group and
Group has_many Users
In my groups/show.html.erb I have the user sign-up form
<h1>Create user</h1>
<%= form_for #user do |f| %>
<%= render 'shared/error_messages', :object => f.object %>
<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 :password %><br />
<%= f.password_field :password %>
</div>
<div class="field">
<%= f.label :password_confirmation, "Confirmation" %><br />
<%= f.password_field :password_confirmation %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
To get a relation between the Group and the User I have a create method in my Users controller as follows
def create
#group = Group.find(params[:group][:id])
#user = #group.users.build(params[:user])
if #user.save
flash[:success] = "You have created a new user"
redirect_to group_path
else
#title = "Create user"
render 'new'
end
end
I have also tried:
#group = Group.find(params[:id])
and
#group = Group.find(params[:group_id])
But I still get an error
Essentially I want to create new users in the group/show.html.erb and associate that user with the group where the user was created. If the user is created in groups/3 for example, how do I set my create method in the Users controller to make sure this relation holds?
In general I've been following the Hartl Rails tutorial book at http://ruby.railstutorial.org/chapters/user-microposts#sec:creating_microposts and following the approach for forms and create methods. However I am not sure how to get the params for groups/3 into the find method like #group = Group.find(?????)
Can someone please enlighten me, this issue has been bothering me for a few days now.
Thanks in advance
After the form is submitted, it takes you to the users#create. This route doesn't have a group_id segment.
To pass group_id there, you need to store it in a hidden field in your form.