When I use this, it works
<%= form_for(#patient, url: patient_add_comment_path(#patient)) do |f| %>
<%= f.text_area :doctor_comment, cols: 65, rows: 3, style: "resize: none; border: 2px solid #888; background-color:#FFF; font-size: 16px; margin-top:0px; margin-left:5px;", placeholder: "doktor comment.." %>
<%= f.text_area :hidden_comment, cols: 65, rows: 3, style: "resize: none; border: 2px solid #888; background-color:#FFF; font-size: 16px; margin-top:0px; margin-left:5px;", placeholder: "doktor hidden comment.." %>
<%= f.submit "Kaydet", class: "btn btn-circle green-haze btn-sm", style: "margin-top: 5px;"%>
<% end %>
But I wanted to use text editor for this for using the class of 'summernote_1'
<div class="col-md-12">
<%= form_for(#patient, url: patient_add_comment_path(#patient)) do |f| %>
<div class="col-md-6">
Doktor Comment <%= f.text_area :doctor_comment, class: "summernote_1"%>
</div>
<div class="col-md-6">
Hidden Comment <%= f.text_area :hidden_comment, class: "summernote_1"%>
</div>
<%= f.submit "Save", class: "btn btn-circle green-haze btn-sm", style: "margin-top: 5px;"%>
<% end %>
</div>
Bu when I click Save button, the link try to send and it does not update, how can I solve this problem?
http://localhost:3000/doctors/2?utf8=✓&_method=patch&authenticity_token=OPPiCvNbcONDyHzzEQ%3D%3D&patient[doctor_comment]=asdfadsfasdfasdfasdfa&patient[hidden_comment]=asdfadsfasd&commit=Save
Related
I have the following code:
<div class="skinny_wrapper wrapper_padding">
<%= form_for #contact do |f| %>
<%= f.label :name %> <br>
<%= f.text_field :name, required: true %>
<br>
<%= f.label :email %> <br>
<%= f.email_field :email, required: true %>
<br>
<%= f.label :message %> <br>
<%= f.text_area :message, as: :text %>
<div class="hidden">
<%= f.label :nickname %> <br>
<%= f.text_field :nickname, hint: "leave this field blank" %>
</div>
<%= f.submit "Send Message", class: "button" %>
<% end %>
</div>
The email input field is not taking the same formatting as the other fields, and is displaying as follows:
Email form issue
I'm not sure why this is happening.
The "skinny_wrapper" and "wrapper_padding" classes contain the following CSS:
.skinny_wrapper {
width: 80%;
max-width: 760px;
margin: 0 auto;
}
.wrapper_padding {
padding: 1.8rem 0;
}
.skinny_wrapper{
position:relative;
}
.skinny_wrapper input[type="text"],input[type="email"],.skinny_wrapper textarea{
width: 80%;
max-width: 760px;
margin: 0 auto;
display:block;
}
.wrapper_padding input[type="text"],input[type="email"],.wrapper_padding textarea{
padding: 1.8rem 0;
}
Try this and let me know what you got!
I am using simple_form with rails 4. The form seems to work properly, except i cannot click on any of the input fields. When i try to click on them, nothing happens, and I can't enter text. Here is the code:
<%= simple_form_for #mimic, url: create_employer_account_path, html: {id: 'braintree-payment-form'}, method: :post, remote: true do |f| %>
<div class="forms clearfix" style="margin-left: auto; margin-right: auto; width: 35%;">
<h1>Personal / Business Information</h1>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :first_name, input_html: {class: 'field', style: 'width: 300px;', id: 'first_name'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :last_name, input_html: {class: 'field', style: 'width: 300px;', id: 'last_name'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :company, input_html: {class: 'field', style: 'width: 300px;', id: 'company'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :email, input_html: {class: 'field', style: 'width: 300px;', id: 'email'}, required: true %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :phone, input_html: {class: 'field', style: 'width: 300px;', id: 'phone'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :fax, input_html: {class: 'field', style: 'width: 300px;', id: 'fax'} %>
</p>
<p style="margin-top: 15px;" class="clearfix">
<%= f.input :website, input_html: {class: 'field', style: 'width: 300px;', id: 'website'} %>
</p>
</div>
<p class="buttons action-buttons text-center">
<%= f.submit "SUBMIT", class: 'submit-button button button-save button-submit'%>
</p>
<% end %>
I am using bootstrap 3 and rails 4. I want to remove the white input field line under Avatar and only display my file upload button!
This is what it looks like:
This is my edit.html.erb:
<div class="col-lg-5">
<div class="well bs-component">
<h2>Edit <%= resource_name.to_s.humanize %></h2>
<%= bootstrap_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :multipart => true }) do |f| %>
<%= devise_error_messages! %>
<%= image_tag #user.avatar.url %>
<div>
<%= f.email_field :email, :autofocus => true %></div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>
<div> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, :autocomplete => "off" %></div>
<div><br />
<%= f.password_field :password_confirmation %></div>
<div><i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password %></div>
<%= f.label 'Add an image' %>
<%= f.file_field :avatar %>
<div><%= f.submit "Update" %></div>
<% end %>
<h3>Cancel my account</h3>
<p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), :data => { :confirm => "Are you sure?" }, :method => :delete %></p>
<%= link_to "Back", :back %>
</div>
</div>
This is my html output:
<h2>Edit User</h2>
<form accept-charset="UTF-8" action="/users" class="edit_user" enctype="multipart/form-data" id="edit_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" value="✓" type="hidden"><input name="_method" value="put" type="hidden"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div>
<img alt="Justdoit" src="/system/users/avatars/000/000/001/original/justdoit.png?1393323443">
<div>
<div class="form-group"><label for="user_email">Email</label><input autofocus="autofocus" class="form-control" id="user_email" name="user[email]" value="ggeorgiev#live.co.uk" type="email"></div></div>
<div> <i>(leave blank if you don't want to change it)</i><br>
<div class="form-group"><label for="user_password">Password</label><input autocomplete="off" class="form-control" id="user_password" name="user[password]" type="password"></div></div>
<div><br>
<div class="form-group"><label for="user_password_confirmation">Password confirmation</label><input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" type="password"></div></div>
<div><i>(we need your current password to confirm your changes)</i><br>
<div class="form-group"><label for="user_current_password">Current password</label><input class="form-control" id="user_current_password" name="user[current_password]" type="password"></div></div>
<label for="user_Add an image">Add an image</label>
<div class="form-group"><label for="user_avatar">Avatar</label><input class="form-control" id="user_avatar" name="user[avatar]" type="file"></div>
<div><input class="btn btn-default" name="commit" value="Update" type="submit"></div>
</form>
<h3>Cancel my account</h3>
<p>Unhappy? </p><form action="/users" class="button_to" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" value="Cancel my account" type="submit"><input name="authenticity_token" value="vpVmH4k1YDXgJxAiZtVoI872hR67COFNoo1irki8sAY=" type="hidden"></div></form><p></p>
Back
Styling the HTML input elements is not something browsers support currently input type=file show only button
We recently used jquery-file-upload to style this type of button (site):
This basically works by replacing the default button with a simple CSS-based one. The code we used is here:
.items .avatar {
display: inline-block;
position: relative;
background: #000;
width: 260px;
}
.items .avatar .avatar img { display: block; }
.items .avatar .avatar { position: relative; }
.items .avatar .avatar:after {
transition: opacity 0.25s ease;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 160px 0 0 107px;
content: url('profile/new_avatar.png');
background: url('profile/photo_delete_bg.png');
opacity: 0;
z-index: 2;
}
.items .avatar .avatar input { z-index: 999; height: 100%;}
.items .avatar .avatar:hover:after { opacity: 0.8; }
.items .avatar .avatar:active:after { opacity: 0.6; }
<div class="items">
<div class="avatar">
<!-- New Avatar Upload Form -->
<%= form_for :upload, :html => {:multipart => true, :id => "avatar"}, :method => :put, url: profile_path(current_user.id), "data_id" => current_user.id do |f| %>
<div class="btn btn-success fileinput-button avatar" id="avatar_container">
<%= f.file_field :avatar, :title => "Upload New" %>
<%= image_tag(#user.profile.avatar.url, :width=> '100%', :id => "avatar_img", :alt => name?(#user)) %>
</div>
<% end %>
<div class="name"><%= link_to name?(#user), root_path %></div>
</div>
There is a much better setup on this question (I copied directly from it for you):
You can try a working example here: http://jsfiddle.net/VQJ9V/307/
(Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)
It works by creating a big file input (with font-size:50px), then
wrapping it in a div that has a fixed size and overflow:hidden. The
input is then only visible through this "window" div. The div can be
given a background image or color, text can be added, and the input
can be made transparent to reveal the div background:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/> </div> CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF; } .fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0) }
in custom.css.scss file
.field_with_errors {
#extend .control-group;
#extend .error;
}
and the html.erb
<%= form_for #timecard , url:{action: "savecard"},html:{class: "form-inline"} do |f| %>
<%= f.label :"Date"%>
<%= f.date_select :starttime ,{use_month_numbers: true }, class: "input-small" %>
<%= f.label :"Hours"%>
<%= f.number_field :hours, class: "input-small" %>
<%= f.label :"Project"%>
<% projects = Project.all.map { |project| [project.name, project.charge_number] } %>
<%= f.select :charge_number, options_for_select(projects) ,{},class: "input-small" , style:"width:150px"%>
<%= f.submit "Save", class: "btn" %>
<%= f.submit "Delete", class: "btn" %>
<%= f.submit "Submit", class: "btn btn-danger",confirm:"You can't edit it agin if you've submitted it" %>
<% end %>
In normal status ,it looks nice
but if something wrong happened,it looks like this
and the html code it generated
<label for="time_card_Hours">Hours</label>
<div class="field_with_errors"><input class="input-small" id="time_card_hours" name="time_card[hours]" type="number" /></div>
<label for="time_card_Project">Project</label>
Because you are using form-inline, and div displays as a block default. try
.field_with_errors {
#extend .control-group;
#extend .error;
display: inline-block;
}
Note that with Bootstrap 3 names have changed
.field_with_errors {
#extend .has-error;
display: inline-block;
}
I ended up using the following:
.field_with_errors {
#extend .has-error;
}
.form-inline .field_with_errors {
display: inline-block;
}
This extends the .has-error Bootstrap class for all forms, and if the form used is an inline form (.form-inline), it displays .field_with_errors as inline-block.
Rails 3.0.3 does not seems to accept <%= f.text_area :message, :class => "share_ta" %> as a valid statement, and says ActionView::Template::Error (undefined method 'message' for []:Array):
Does anyone know why?
--Edit--
This is the form_for
<%= form_for :activity, :url => post_activity_path do |f| %>
<div class="share_tb">
<div class=share_t><span style="margin-left: 10px;">Tell us what's new <span style="color: #1fc2d1;"><%= #user.name %></span></span></div>
<%= f.text_area :message, :class => "share_ta" %>
</div>
<div id=sm_share class=sm_share_rc>
<ul>
<li style="color: #6b6b6b; font-size: 10pt; display: inline; list-style-type: none; float: right; margin-right: 10px; margin-top: 5px;"><%= f.check_box :everyone, "0", :class => "styled" %>Everyone</li>
<li style="color: #6b6b6b; font-size: 9pt; display: inline; list-style-type: none; height: 3px; float: left; margin-top: 5px;"><input type="checkbox" name="friends_only" value="3" class="styled">My Friends<br></li>
</ul>
<%= f.submit "Share", :class => "sm_share_b" %>
</div>
</div>
<% end %>
#Amit,
How have you specified form_for?
EDIT: 2nd time with more information from original poster.
It should be
<%= form_for :activity, :url => acti_path do |f| %>
<%= f.text_area :message, :class => "share_ta" %>
<% end %>