CODEWITHSUNDEEP
htmlcsstwitter-bootstrapruby-on-rails-4multiple-columns
user3597950
user3597950

Reputation: 10241

Bootstrap columns within columns for iteration over an object

I want to create a pair of bootstrap columns inside another bootstrap column.

My output is not as desired for some reason.They look completely goofy for some reason. Did I make a rookie mistake in my formatting?

I am iterating over a @user object and having the profile picture be on the left and the profile info be on the right. There are many users so it should ideally style for all the iterations of the users in the database.

I feel this code should work but it doesn't, any idea as to what happened:

<div class="row">

    <div class="other-box col-sm-6">
        <p>Random text!!!</p>
    </div>

    <div class="index-user-container col-sm-6">
        <div class="row">
            <% @users.each do |user| %>
                <div class="index-picture col-sm-4">
                    <%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
                </div>
                <div class="index-info-box col-sm-8">
                    <%= user.first_name %>
                    <%= user.last_name %>
                    <%= user.email %>
                    <%= link_to 'Go to profile', user_path(@user) %>
                </div>    
            <% end %>
        </div>
    </div>

</div>

I am using twitter bootstrap. Here is a screen shot of the goofyness: enter image description here

Upvotes: 0

Views: 852

Answers (1)

lux
lux

Reputation: 8455

If you want a new row for each user in the list, then put the iterator above the row div, not inside it - otherwise, you might get some funky results.

<div class="index-user-container col-sm-6">
   <% @users.each do |user| %>
      <div class="row">
            <div class="index-picture col-sm-4">
                <%= image_tag user.image.thumb('150x185#').url if user.image_stored? %>
            </div>
            <div class="index-info-box col-sm-8">
                <%= user.first_name %>
                <%= user.last_name %>
                <%= user.email %>
                <%= link_to 'Go to profile', user_path(@user) %>
            </div>
    </div>
  <% end %>
</div>

Upvotes: 1

Related Questions