I want to customize input areas in this code
<%= simple_form_for #fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %>
<%= f.input :regular, label: "Regular" %>
<%= f.input :medium, label: "Medium"%>
<%= f.input :premium, label: "Premium" %>
<%= f.input :diesel, label: "Diesel" %>
to have styling like the image below
I dont want horizontol or anything. Just want that dollor in front.
Or even better, something like below but with $ instead of #
You can find solution here. He uses Bootstrap and SimpleForm
You have to add bootstrap css library into your application and try the below code
simple_form_for #fuel_price, url: supplier_fuel_prices_path, class: "m-t" do |f| %>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :regular, placeholder: "Regular", class:"form-control" %>
</div>
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :medium, placeholder: "Medium", class:"form-control"%>
</div
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :premium, placeholder: "Premium",class:"form-control" %>
</div
<div class="input-group">
<div class="input-group-addon">$</div>
<%= f.text_field :diesel, placeholder: "Diesel",class:"form-control" %>
</div
</div>
<%end%>
Related
I have the following snippet out of one of my forms, I would like to modify the placeholder text, so that e.g. "Select assignee" will appear before typing a data in the field. I have changed the placeholder text and the prompt, but only the default text "Please select" is displayed. If I change the text in the placeholder for the "start_at" and "end_at", it does changes, but not e.g. for "all_day" or "office_in_charge" and "contact_person". Why doe the change work for one but not for the other.
How can I modify it to what I want it to be ?
Thanks and regard,
Dani
<div class="row form-group">
<div class="col-sm-3 field">
<%= form.text_field :start_at, {placeholder: :start_at, class: 'form-control date-field datetimepick', readonly: (!this_is_a_subevent) } %>
</div>
<div class="col-sm-3 field">
<%= form.text_field :end_at, {placeholder: :end_at, class: 'form-control date-field datetimepick', readonly: (!this_is_a_subevent) } %>
</div>
<div class="col-sm-1 form-check field">
<%= form.check_box :all_day, {placeholder: :all_day, class: 'form-check-input'} %>
<%= form.label :all_day, {class: 'form-check-label'} %>
</div>
<div class="col-sm-5">
<%
offices = Office.all.collect {|t| [t.display_name, t.id]}
%>
<%= form.label :assign_event_to %>
<%= form.select :office_in_charge, offices, {prompt: :office_in_charge}, {placeholder: :office_in_charge, class: 'form-control'} %>
<%
event_owners =
::CoreModels::PeopleAndCompanies::Person.all +
::CoreModels::PeopleAndCompanies::Company.all +
Office.all +
Department.all #+
#Team.all
%>
<%= form.label :contact_person %>
<%= form.collection_select :event_owner_gid, event_owners, :to_global_id, :to_s, {prompt: :event_owner}, {placeholder: :event_owner, class: 'form-control'} %>
</div>
</div>
How would you do a placeholder for a checkbox or a list? It's not related to rails. Try to do it first in a plain html. A placeholder cannot be used to these inputs.
Well I found how, just use, e.g.:
{:prompt => "Select contact person"}
e.g.:
<%= form.select :contact_person, person, {:prompt => "Select contact person"}, {class: 'form-control'} %>
This works.
Regards,
Dani
Simple_form
<%= simple_form_for(#book, wrapper: :horizontal_form, wrapper_mappings: {
}, html: { class: 'form-horizontal' }) do |f| %>
<%= f.error_notification %>
<div class="image-upload">
<%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
</div>
<%= f.input :category_id, collection: #categories, prompt: 'Select a category' %>
<%= f.input :author %>
<%= f.input :description %>
<div class="d-flex">
<div class="ml-auto">
<%= f.button :submit %>
<%= f.button :cancel, to: books_path %>
</div>
</div>
<% end %>
This is my simple_form form. I want the f.input :book_cover to be displayed as the icon fa fa-cloud-download without the normal download button.
CSS.
.image-upload > input {
display: none;
}
Ive got another form working with it (this is just a snippet of a regular form_for resource:
<%= f.form_group :avatar, class: "row" do |f| %>
<%= f.label :avatar, class: "col-sm-4 col-form-label" %>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<% if #user.avatar.present? %> <%= #user.avatar_file_name %>
<% end %>
<%= f.file_field :avatar %>
<%= f.error_messages %>
</label>
</div>
<% end %>
Can't seem to get my simple_form working with just the icon.
Edit: Uploading a image to show what my problem is and what it should look like
picture
should look like this
SimpleForm has a input_field method that you can use instead input to render only the actual input element, without wrapper div and label. That helps if you want to build more complex structures manually.
<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
<label class="image-upload form-control">
<i class="fa fa-cloud-download"></i>
<%= f.input_field :book_cover %>
<%= f.error_messages %>
</label>
</div>
I have a rails app where user can assign task to another user by creating task action. At the moment I have the f.collection_select, but as the number of users grows it won't be a good solution. I would like to change it into kinda search form. My problem is that I don't see how I can do this. I have other search forms, but those are for show/index action. How can I do this for the create action?
here is my current code:
<%= form_for ([#user, #task]) do |f| %>
<%= render 'layouts/error_messages', object: f.object %>
<div class="field form-group">
<%= f.label :executor_id %>
<%= f.collection_select(:executor_id, User.all, :id, :email, class: "form-control") %>
</div>
<div class="field form-group">
<%= f.label :content %>
<%= f.text_area :content, class: "form-control" %>
</div>
<div class="field form-group">
<%= f.label :deadline %>
<%= f.date_select :deadline, class: "form-control" %>
</div>
<div class="actions">
<%= f.submit "Create Task", class: 'btn btn-primary', "data-sid" => current_user.id, "data-rip" => :executor_id %>
</div>
<% end %>
I am looking for a way to change the Combobox Collection (combo_two) depends on the option choose in another combobox (combo_one). Follow bellow the Rails form:
<%= form_for(#requisite) do |f| %>
<div class="field">
<%= f.label :this_type %><br>
<%= f.text_field :this_type, :value => params["type"] %>
</div>
<div class="field">
<%= f.label :this_id %><br>
<%= f.number_field :this_id, :value => params["id"] %>
</div>
<div id="combo_one" class="field">
<%= f.label :require_type %><br>
<%= f.select :require_type, ([["Element","Element"],["Research","Research"]]) %>
</div>
<div id="combo_two" class="field">
<%= f.label :require_id %><br>
<%= f.collection_select(:require_id, #elements, :id, :name, :prompt => true) %>
</div>
<div class="field">
<%= f.label :qty %><br>
<%= f.number_field :qty %>
</div>
<div class="field">
<%= f.label :lvl %><br>
<%= f.number_field :lvl %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I hope we resolve it with javascript (jquery), but I do not know javascript (jquery)
with jquery you have posible get a value for first combo box using a html onchange event in combo box
<%= f.select :require_type, ([["Element","Element"],["Research","Research"]]),:onchange => GetValue(this) %>
or
<select class="combo_box" onchange="GetValue(this);"></select>
function GetValue(this){
var value = this.value;
//Another code for second combobox
}
I am using devise in my rails app, I converted the devise views to use simple form. When I attempt to sign up with an incorrect password format the flash messages for the password do not appear. Flash messages appear for ever other field. Does anyone know how to fix this problem.
<div class="container">
<div class="panel small-5 small-centered columns">
<div class="row">
<h2>Sign Up</h2>
<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name),
:html => {:multipart => true}) do |f| %>
<%= f.input :email, label: "E-mail", :autofocus => true %>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.label :password, label: "Password" %>
<%= f.password_field :password %>
</div>
<div class="small-6 columns">
<%= f.label :password_confirmation %>
<div id="password-confirm">
<%= f.password_field :password_confirmation %>
</div>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="small-6 columns">
<%= f.input :last_name, label: "First Name" %>
</div>
<div class="small-6 columns">
<%= f.input :first_name, label: "Last Name" %>
</div>
</div>
</div>
<div class="row">
<div class="sign-up">
<%= f.label "Profile Photo" %><br>
<%= f.file_field :avatar, label: "Profile Photo" %>
<%= f.input :twitter_handle, label: "Twitter Url" %>
<%= f.input :linked_in_url, label: "Linked In Url" %>
<%= f.input :about_me, label: "About You (500 character max)" %>
<%= f.submit "Sign up", class: "button" %>
<% end %>
</div>
</div>
</div>
</div>