Simple Form behaving different than form_for

flenning

New Member
#1
Simple_form
Mã:
<%= 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.
Mã:
.image-upload > input {
    display: none;
}
Ive got another form working with it (this is just a snippet of a regular form_for resource:
Mã:
 <%= 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

EO9Wb.png


6EVDU.png
 

Admin

Administrator
Thành viên BQT
#2
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.
Mã:
<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>
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top