How to display inline with rails?


Tags: html,css,ruby-on-rails,ruby

Problem :

I would like to know how I can display my Post "inline" I'm begining on css, and I don't know where do I have to put the code display:inline on my css sheet. I'd try post, main_content, body, but it's not working. Can you explain me how to doo it, I follow a lot of tuto and the result it's never the same for me, so I don't understand how to do it .

my actual post display : Actual display

My code : Index post view :

<div class="transitions-enabled" id="post">

<%- @posts.each do |post|%>

  <div class="row">

      <div class="post">


        <div class="panel-body">
          <div class="form-group text-center">
            <h3> <%=post.title%></h3>
          </div>
        </div> 

        <div class="box panel panel-default">
          <div class="image_wrapper">
             <%= link_to (image_tag post.image.url(:medium), class: 'img-responsive'), post_path(post)%>
          </div>
        </div>

        <div class="panel-body">
          <div class="form-group text-center">
            <p><%= post.prix %></p>
          </div> 
        </div> 


    </div>
  </div> 

<%end%>
</div>

& my application css :

@import "bootstrap-sprockets";
@import "bootstrap";

@mixin box-shadow {
  -webkit-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
  box-shadow: rgba(0, 0, 0, 0.09) 0 2px 0;
}

$red: #DB6161;

body {
  background: rgb(235, 238, 243);
}

.main_content {
  padding: 0 0 50px 0;

}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  @include box-shadow;
  background: white;
  font-weight: bold;
}


.navbar {
  margin-bottom: 50px;
  @include box-shadow;
  border: none;
  .navbar-brand {
    text-transform: uppercase;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 25px;
    a {
      color: $red;
    }
  }
}

.post {
  background: white;
  border-radius: 5px;
  margin-bottom: 40px;
  @include box-shadow;
  float: left;


  .image_wrapper {
    width: 400px;
    height: 300px;
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
  }
  img {
    width: 100%;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    &:hover {
      transform: scale(1.075);
    }
  .panel-body {
    padding: 35px;
    h1 {
      margin: 0 0 10px 0;
    }
    .description {
      color: #868686;
      line-height: 1.75;
      margin: 0;
    }
  }
  }
  h2 {
    padding: 15px 5%;
    margin: 0;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.5;
    a {
      color: $red;
    }
  }
}

#post_top {
  margin-bottom: 50px;
}

#post_info, #ingredients, #directions {
  background: white;
  @include box-shadow;
  min-height: 360px;
  border-radius: 5px;
  padding: 2em 8%;
}

.post_image {
  max-width: 100%;
  border-radius: 5px;
  @include box-shadow;
}

#post_info {
  h1 {
    font-size: 36px;
    font-weight: normal;
    color: $red;
  }
  .description {
    color: #8A8A8A;
    font-size: 20px;
  }
}

#ingredients, #directions {
  margin-bottom: 50px;
  ul, ol {
    padding-left: 18px;
    li {
      padding: 1em 0;
      border-bottom: 1px solid #EAEAEA;
    }
  }
}

.form-inline {
  margin-top: 15px;
}
.form-input {
  width: 65% !important;
  float: left;
}
.form-button {
  float: left;
  width: 30% !important;
  margin-left: 5%;
}
.add-button {
  margin-top: 25px;
}


Solution :

Besides CSS style, the problem you have is you've added a row class surrounding every post.

Say you want to display three posts in each row, do it like this:

<%- @posts.each_slice(3) do |posts| %>
  <div class="row">
    <%- posts.each do |post|
      ...
    <% end %>
  </div>
<% end %>

Update: just realized original code example was not showing although this has been marked as answer. Updated to show the example.

Or just move .row div outside our each block, which puts all posts inside a single .row.


    CSS Howto..

    how to apply CSS styles in current document recieved from AJAX request?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to apply a CSS class to a SVG Text element

    How to style responsive table to make table like list?

    How do I get a bold version of a custom font?

    ┬┐How to create text slider animation?

    How to apply css animation to angular view when the view is called

    How to manually apply styles from particular style sheet to an element?

    How do you associate a css/sass stylesheet to a view in rails?

    How do i automatically resize Fonts and Images (complete Website) on window-resize?

    How to add image and change visibility on hover CSS

    How to change a lot of img when hover

    How do I script such that my panoramic image can be panned left and right up to its edges?

    How do I use CSS to let one or more elements fill remaining space?

    How to change list item color with JQuery

    How to get CSS left property value on second element of anchor

    how to insert css into html for blogger gadget

    How to find out if an element is in a fixed positioned container?

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to create an email template from a responsive website?

    nth-child's child is not shown

    How to use another brackets/tabs policy for my CSS?

    How to send an HTML file with css?

    Looping through my table, how do I know if the checkbox is checked?

    Handle text as elements, how to hide with CSS?

    How to make text run top-to-bottom in CSS?

    How to make a small icon using css?

    CSS: How to make a responsive grid without a framework

    How to get the perticluar image from large set images in one image using css

    css how to define a class for table to control the style of table rows