How to fix coloumn size during search method in html?

Question

I am implementing a search and on that search results come. BUT WHEN the organization name becomes big. The alignment completely changes. How can I able to fix the same.

 <div class="col-sm-6 col-md-4 p0"  v-for="post in data" v-if="data.indexOf(post) <= 6">
                            <div class="box-two proerty-item">
                                <div class="item-thumb">
                                    <a href="property-1.html" ><img src="/static/assets/img/demo/property-1.jpg"></a>
                                </div>
                                <div class="item-entry overflow">
                                    <h5><a v-bind:href="'/details/'+post.pid">{{post.bussinessName}}</a></h5>
                                    <div class="dot-hr"></div>
                                    <span class="pull-left"><b>City :</b> {{post.city}} </span>
                                    <span class="proerty-price pull-right">{{post.contactNumber}}</span>
                                </div>
                            </div>
                        </div>

This is my html code.

If {{post.bussinessName}} is a bigname alignment changes completely as in figure, How can I able to correct it.

if you are using cards to display, you can auto arrange them using https://masonry.desandro.com/ library. If not then, truncate the name or just set aside a seperate row for the name and start pics with next row. — , Jan 01 '18 at 07:01
I would love to but with this much code, it is hard to replicate the issue, can u post the working snippet in fiddle or something, also https://masonry.desandro.com/ has the steps needed to implement it. So it should be quite easy, else provide working snippet — , Jan 01 '18 at 07:14

score 3 · Answer 1 · answered Jan 01 '18 at 07:20

bootstrap 4 autommatically solves the issue for you, see the code below, it will solve the issue for you.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqweqw eqweq weqweqwq</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqweq</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweq weqweqwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe </div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweq</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe qwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qweqwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">qwe asdasd</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asda qweqwe</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asd adasd asdasdasd aadasdasd asdasd </div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asdasd asdasd</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">ad</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">asdasd</div></div>
      <div class="col-sm-2 mt-2"><div class="bg-primary">zxczxczxc</div></div>
    </div>
  </body>

</html>

score 2 · Answer 2 · answered Jan 01 '18 at 06:59

2

You can truncate post.bussinessName or you can try this in your css:

.proerty-item {
  min-height: 330px;
}

answered Jan 01 '18 at 06:59

Jannie Theunissen

28,256
21
100
127

i tried this css, but nothing happens. How can I able to truncate? – med Jan 01 '18 at 07:05

score 2 · Answer 3 · answered Jan 01 '18 at 07:03

I can see you are already using bootstrap, so simply use its grid features :: https://v4-alpha.getbootstrap.com/layout/grid/. This will take care of correctly aligning your three blocks in one row.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>

JsFiddle :: https://jsfiddle.net/desscxo1/

How to fix coloumn size during search method in html?

3 Answers3

Linked