space/app/views/admin/spaces/_sub_unit_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <%= stylesheet_link_tag "lib/dropzone" %>
  <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" %>
  <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" %>
  <%= stylesheet_link_tag "space-admin" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/dropzone" %>
  <%= javascript_include_tag "validator" %>
  <%= javascript_include_tag "space/space" %>
<% end %>

<div class="message hide">
  <i class="fa fa-refresh fa-spin"></i>
  <span class="upload-text">Uploading...</span>
</div>

<!-- Input Area -->
<div class="input-area">
  <!-- Module -->
  <div class="tab-content">

    <!-- Basic Module -->
    <div class="tab-pane fade in active" id="basic">

      <% @site_in_use_locales.each do |locale| %>
        <%= f.fields_for :title_translations do |f| %>
          <div class="control-group">
            <%= f.label t(:title) + " (" + t(locale) + ")", :class => "control-label muted" %>
            <div class="controls">
              <%= f.text_field locale, placeholder: t("space.sub_unit_name"), data: {"fv-validation" => "required;", "fv-messages" => "Cannot be empty;"}, :value => @sub_unit.title_translations[locale.to_s] %>
            </div>
          </div>
        <% end %>
      <% end %> 

      <div class="control-group">
        <label class="control-label muted"><%= t(:images) %></label>
        <div class="controls">
          <% if params[:action] == "edit_sub_unit" %>
          <div class="group group-clear-4 clearfix">
            <% @sub_unit.floor_sub_unit_images.each do |image| %>
              <div class="group-item col-md-3">
                <div class="group-item-inner">
                  <img class="group-img" src="<%= image.image.thumb.url %>">
                  <div class="group-actions">
                    <input class="group-checkbox" type="checkbox" name="images_to_destroy[]" value="<%= image.id.to_s %>" /> 
                    <label class="group-label">Delete Image</label>
                  </div>
                </div>
                    
              </div>
            <% end %>

          </div>
          <% end %>
          <div class="dropzone dropzone-pool" id="sub-unit-images">
            <div class="dropzone-previews" id="sub-unit-images-container"></div>
          </div>
          <button class="remove_image_btn btn btn-warning">
            <i class="fa fa-ban"></i>
            <span>Remove all images</span>
          </button>
        </div>
        <div id="image_ids">
            
        </div>
      </div>

      <% @site_in_use_locales.each do |locale| %>
        <%= f.fields_for :content_translations do |f| %>
          <div class="control-group">
            <%= f.label t(:content) + " (" + t(locale) + ")", :class => "control-label muted" %>
            <div class="controls">
              <%= f.text_area locale, placeholder: t(:content), :value => @sub_unit.content_translations[locale.to_s], :class=> 'ckeditor'  %>
            </div>
          </div>
        <% end %>
      <% end %> 
      
    </div>
  </div>
</div>


<!-- Form Actions -->
<div class="form-actions">
  <% if params[:action] == "add_sub_unit" %>
    <%= f.hidden_field :floor_unit, :value => @floor_unit.id %>
  <% elsif params[:action] == "edit_sub_unit" %>
    <%= hidden_field_tag :floor_sub_unit_id, @sub_unit.id.to_s %>
  <% end %>
  <%= f.submit t('submit'), class: 'btn btn-primary', :id => "floor-sub-unit-form-btn" %>
</div>

<script>
      function equalHeight(items) {
          if (typeof items === 'string' && items.length > 0) {
              var $items = $(items);
              var $this = null;
              var maxHeight = -1;

              // when images are loaded
              $items.find('img').load(function() {
                console.log('g')
                  $.each($items, function(i, val) {
                      $this = $(this);
                      if ($this.outerHeight() > maxHeight) {
                          maxHeight = $this.outerHeight();
                      }
                      console.log($this)
                  }).css('min-height', maxHeight + 'px');
              });
          }
      }

      equalHeight('.group-item-inner');
      
</script>