1

I have these news blocks but when I click on "show more" a space appears between the blocks that I can not remove

demo: sitelab.combr.co/repro.html

At this moment
The space between the blocks

The space between the blocks

How I wanted it to work: Without the spaces between the blocks one below the other even after the news block has expanded Without the spaces between the blocks one below the other even after the news block has expanded

code

  
   $(document).ready(function(){

   var content = $('.card-text');
   var moretext = "Show more ❯";
   var lesstext = "Show less";


  content.each(function(){
          if ($(this).text().length > 83) {
  
              $(this).addClass('truncate-ellipsis');
              $(this).after( '<a href="" class="readmore-link">' + moretext + '</a>' );
          }
        


      });

  $('.readmore-link').on('click', function(b){
   b.preventDefault();
   if($(this).prev().hasClass("truncate-ellipsis")) {
            $(this).prev().removeClass("truncate-ellipsis");
            $(this).html('Fechar');
            $(this).attr('class','readmore-link');
            
        } else{


            
            $(this).prev().addClass("truncate-ellipsis");
            $(this).html(moretext);
          
        }
      return false;

  });




   });
  
.truncate-ellipsis{
 display: block;
 display: -webkit-box;
 height: 60px;
 text-overflow: ellipsis;
 overflow: hidden;
    -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.readmore-link{

  color:blue;
}
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
           <!-- Rab Css -->
        <link rel="stylesheet" href="http://sitelab.combr.co/css/style.css"/>

</head>
<body>
   <div class="container">
    <div class="row row-centered">
    
    <h1 class="title">News</h1>
    <h2 class="subtitle">Lorem Ipsum is simply dummy text</h2>
   
 
<div class="card-deck">
 <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">CNN</h4>
                        <div class="meta">
                            <a href="#">News1</a>
                        </div>
                        <div class="card-text">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
                        </div>
                    </div>
                   
                </div>
            </div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">CNN</h4>
                        <div class="meta">
                            <a href="#">News 2</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege</div>
                    </div>
                   
                </div>
            </div>
 <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

  <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

   <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

  <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>

              <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
                <div class="card">
                    <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
                    <div class="card-block">
                        <h4 class="card-title">BBC</h4>
                        <div class="meta">
                            <a href="#">News 1</a>
                        </div>
                        <div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
                        </div>
                    </div>
                   
                </div>
            </div>


</div>
</div>
</div>

</body>
</html>
Krunal
  • 77,632
  • 48
  • 245
  • 261
Bruno Andrade
  • 565
  • 1
  • 3
  • 17

1 Answers1

0

Actually, it's impossible to get the comportment your wish only with relative position and float system used by Bootstrap. Because each new blocks lines location is set relative to the previous height line. So, if you increase an element height in a line, all the next ones will move down.

The first solution you have is to use column layout on your card-deck class. But that means your cards will not be automaticly placed side by side. Some of them will be placed above others, ordered by columns. Here is an exemple I made with a #test div that is taller than other elements. As you can see (on the snippet fullPage mode), elements that are under that #test div moved down . 

.card-deck {
  column-width: 300px;
column-gap: 10px;
width: 90%;
max-width: 100%;
margin: 50px auto;
}

.card {
  border: 2px solid grey;
  margin: 0 2px 15px;
  padding: 10px;
  padding-bottom: 10px;
  background: #fcfcfc;
  display: inline-block;
}

#test {
  height: 500px;
}

.card-img-top {
  width: 100%;
}

.card-block {
  padding: 1.25rem;
}
 <div class="card-deck">
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card" id="test">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>

      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
      <div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>
<div class="card">
        <img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
        <div class="card-block">
          <h4 class="card-title">CNN</h4>
          <div class="meta">
            <a href="#">News1</a>
          </div>
          <div class="card-text truncate-ellipsis">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a , posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
          </div><a href="" class="readmore-link">Show more ❯</a>
        </div>

      </div>

    </div>

Another solution you can use is to set element position on absolute. Using a grid layout library like Masonry may be a good idea.

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

Alex - DJDB
  • 700
  • 2
  • 8
  • 19
  • Why are you using `flex: 1 1 auto;` when you do not use `display: flex`?? ... the `flex: 1 1 auto;` will have no effect on any element without it. – Asons Jun 27 '17 at 15:44
  • YES !! :) I agree with you. It's an mistake of mine. I forgot to erase this code I wrote during my tryings to solve the problem. I hadn't seen it. Thank for your report and for your vigilance, I'm going to update the answer. As you said, those properties are useless, so the effet I reached still works without them – Alex - DJDB Jun 27 '17 at 16:08