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 do I add a CSS3 transition to an image overlay?

    How can I use Font Awesome (or other font icons) instead of the jQuery sprites in Primefaces DataTable?

    How to change the body background for three different div-s

    how to set the child-class height as per the parent div using css

    How can I set the correct position of the text in CSS?

    How to center my menu bar with css. (I am using Microsoft Expression Web 4)

    How to make the bootstrap button,when clicked to redirect to a specific page

    How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

    CakePHP call really old css file. How to refresh

    How to get the “absolute” position of an html element

    How do I apply css to second level menu items?

    How can I float divs so that they expand past their container?

    how to indent html output using CSS

    css/html how to make logo appear after heading

    How do I make images fit the entire screen fully, regardless of screen size?

    How to remove an overhanging div

    How to change hover background on links in css?

    How to apply my class from css to checkbox? [duplicate]

    Site Network Bar - Show Current Site Stats, CSS?

    How to set fit-content for width in right side - dynamic content width

    How to Get CSS/JavaScript Pop-Up to Transition In

    How to set CSS rule for a DIV in a LI of class UL?

    How to keep image position despite window/device size?

    How to select an element that has id starting with a digit (css)?

    How to find the highest z-index using jQuery

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How to vertically align label and input in Bootstrap 3?

    How to have different table styles in CSS

    How to check conditional in CSS?

    How to set height?