CODEWITHSUNDEEP
cssrubytwitter-bootstrapruby-on-rails-4twitter-bootstrap-3
Annette
Annette

Reputation: 317

How can I make this a horizontal list?

Right now my users are displaying vertically. I would like them to display horizontally side by side. I know this is a very simple to do however, I am having a hard time getting it to be how I would like. Thank you in advance.

User/Index

<div class="page-header">
<center><strong><h1> All Users </h1></strong></center>
</div>

  <% @users.each do |user| %>
  <div class="user horizontal-align col-md-2">
     <%= link_to image_tag(user.avatar.url(:thumb)), user %>
      <br><%= link_to user.name, user %></br>
        <% if current_user.admin %>
     <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>

        <% end %>
    <% end %>
 </div>

<div class="center">
<%= will_paginate @users, renderer: BootstrapPagination::Rails %>
</div>

User CSS

.user {
    width: 200px;
    display: inline-block;
}

Upvotes: 0

Views: 604

Answers (3)

CChoma
CChoma

Reputation: 1154

Try the following:

  1. Isolate .user from the .col-x-x containers. The col containers should be used for layout only. Styling the .user element is overriding the BS3 layout styles.
  2. Remove any width definitions in your CSS for .user. Allow width to fall.
  3. Wrap nested columns with .row

jsFiddle: http://jsfiddle.net/zktfu52t/2/

EX: 

<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">
    <div class="row">
        <% @users.each do |user| %>
        <div class="horizontal-align col-md-2">
            <div class="user">
                <%= link_to image_tag(user.avatar.url(:thumb)), user %>
                <br><%= link_to user.name, user %></br>
                <% if current_user.admin %>
                <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
                <% end %>
            </div>
        </div>
        <% end %>
    </div>
</div>

Upvotes: 2

engineersmnky
engineersmnky

Reputation: 29373

try this 

<div class="col-md-offset-4 col-md-8 col-lg-8 col-lg-offset-4">

  <% @users.each do |user| %>
    <div class="user col-md-2 col-lg-2 text-center">
      <%= link_to image_tag(user.avatar.url(:thumb)), user %>
      <p><%= link_to user.name, user %></p>
      <% if current_user.admin %>
        <%= link_to "Delete", user, method: :delete, data: { confirm: "Are you sure?" } %>
      <% end %>
  <% end %>
</div>

With this css

.user{
     margin:0.2%;
     display:block;
}

This will give you 5 across on medium and large screens and vertical stacks on small and extra small screens. A Quick jsFiddle for you.

Also you have unclosed div tags here:

<div class="panel panel-default">
<div class="panel-heading center">

Upvotes: 0

Brennan
Brennan

Reputation: 5742

First things first: stop using the center tag. It's deprecated and unreliable. Use CSS for your styling needs.

To get your users displayed horizontally, you need to wrap all of the user details (links, in this case) in some sort of element. A div is probably best. Then you need to set those elements to display: inline-block.

Upvotes: -1

Related Questions