Using bootstrap glyphicon in rails simple form attachment - ruby-on-rails

Hi all I use simple form. I have a model which contains attachment. Everything works fine except for I get a browse button in browser as shown in below image. Instead of Browse button I want bootstrap attachment glyphicon. How can I achieve this?. My code is below this image:
<%= simple_form_for Status.new do |f| %>
<%= f.input :status, as: :text, required: true, autofocus: true %>
<%= f.input :statachment, as: :file, label: 'Attach here' %>
<%= f.submit "Post", class: 'btn btn-primary' %>
<% end %>

You can try the following ways
http://markusslima.github.io/bootstrap-filestyle/
just need to add
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Then
$(":file").filestyle({input: false});
or
<%= f.input :statachment, as: :file, label: 'Attach here', class: "filestyle", data-input: "false" %>
Or using another way
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In Views
<span class="btn btn-default btn-file">
Browse <%= f.input :statachment, as: :file, label: 'Attach here' %>
</span>
and in css
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

Related

Syntax error, unexpected '>' when putting ERB in image_tag ID

I have a situation in my app where I need to render a set of images with the element ID in each image's ID tag. It looks like this:
<% things.each do |thing| %>
<%= image_tag "ballerino.png", id: "voteDownAnimation<%= thing.id %>", class: "hidden", style: "position: fixed; z-index: 100; height: 70vh" %>
<%= image_tag "fist-left.png", id: "voteUpAnimationLeft<%= thing.id %>", class: "hidden", style: "position: fixed; z-index: 100; width: 50%" %>
<%= image_tag "fist-right.png", id: "voteUpAnimationRight<%= thing.id %>", class: "hidden", style: "position: fixed; z-index: 100; width: 50%" %>
<% end %>
If I remove the <%= thing.id %> from the id tags it renders fine, but with it it yields this error:
syntax error, unexpected '>'
... z-index: 100; height: 70vh" %>
... ^
Can anyone see where I'm going wrong with this? I've been staring at it for hours, but can't see anything syntactically wrong with it.
Change your code with below, you have to use string #interpolation
:-
<%= image_tag "ballerino.png", id: "voteDownAnimation#{thing.id}", class: "hidden", style: "position: fixed; z-index: 100; height: 70vh" %>
Above you are using ruby tag under ruby tag means :-
<%= <%= %> %>
which is syntactically wrong in Ruby on Rails.
For string interpolation you should use #{} instead of <%= %>
Change
<%= image_tag "ballerino.png", id: "voteDownAnimation<%= thing.id %>", class: "hidden", style: "position: fixed; z-index: 100; height: 70vh" %>
to
<%= image_tag "ballerino.png", id: "voteDownAnimation#{thing.id}", class: "hidden", style: "position: fixed; z-index: 100; height: 70vh" %>

Textarea submitting ruby on rails

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

ruby on rails and bootstrap , make field_with_errors display horizontal

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.

Make help message appear below form field with Rails/devise/boostrap/simple_form

On https://login.mailchimp.com/signup, when you click on a form (:focus), a "help message" appears below. For example "what's your email address?" appears below email.
I tried to analyze their css but I failed to apply such a thing on my code.
I think I'm missing something important, like how to tell the program that I want it to appear when the user clicks inside the field.
Here is my code
Rails view:
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'form-vertical' }) do |f| %>
<fieldset>
<%= f.error_notification %>
<%= display_base_errors resource %>
<%= f.input :email, :required => true, placeholder: t("devise.registrations.sign_up_page.whats_your_email_address") %>
<div class="field-help"> What's your email address? </div>
<%= f.input :password, :required => true %>
<%= f.input :password_confirmation, :required => true %>
<div class="fullsized"><%= f.button :submit, t("devise.registrations.sign_up_page.sign_up"), :class => 'btn-primary' %>
</div>
</fieldset>
<% end %>
css:
.field-help {
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
-ms-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
display: block;
opacity: 0;
max-height: 0;
top: -1.8461538461538463em;
overflow: hidden;
white-space: normal;
width: 100%;
max-width: 550px;
word-wrap: break-word;
font-size: 0.8125em;
line-height: 1.3846153846153846em;
font-weight: 700;
position: relative;
color: #737373;
letter-spacing: .01em
}
You should use CSS3 fade in/out flair. Try add this style :
fieldset input:focus+.field-help {
opacity:1;
top: 0;
max-height: 20px;
margin-bottom:10px;
}
demo : http://jsfiddle.net/RVGPd/1/

rails seems to have a problem with text_area

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 %>

Resources