CODEWITHSUNDEEP
ruby-on-rails
sridhar
sridhar

Reputation: 1

How to display data in two columns in Rails

I'm new to Ruby on Rails. How can I display products in two columns?

When I write the following, the right column will display the same products, but I want to display some in the left and some in the right columns.

#main_container  
.left_col

%div{"data-hook" => "___homepage_featured_products"}

%h3

   Featured Activities
 - @featured.each do |pr|
   - @product = pr
   %a.box{:href=>url_for(@product), :title=>"#{@product.name} | #{@product.location}"}
     - if @product.images[0]
       .img{:style=>"background-image: url('#{@product.images[0].attachment.url(:original)}')"}
       .details
         %h3
           = @product.name.truncate 20
         %p.infos
           = image_tag @product.activity_type.icon, :class=>"pictogram" rescue ''
           %span= @product.activity_type.name.titleize rescue ''
           \/
           %span.price= number_to_currency @product.price rescue ''
           \/
           = @product.location
           \/
           = @product.level
         %p
           = @product.description.truncate(120) rescue ''

.right_col

Upvotes: 0

Views: 340

Answers (1)

mind.blank
mind.blank

Reputation: 4880

You could put each product into its own div, and then use CSS to float them to the left so that a maximum of 2 boxes will appear next to each other horizontally. This will give the effect of a 2 column layout. As an example:

#main_container { width: 900px; }
.featured_product { width: 450px; float: left; }

Add padding etc as needed.

Alternatively you could split the array after you retrieve it from the database and run the code twice, once in the left column and once in the right:

@left, @right = @featured.in_groups_of((@featured.count / 2.0).ceil, false)

Upvotes: 1

Related Questions