CODEWITHSUNDEEP
javascriptjqueryhtmlcssapi
Pujan
Pujan

Reputation: 69

JQuery append skips content after spaces

I am trying to dynamically append cards inside a div.

My code to do that is as follows:

    $.getJSON(url, function(jsonresult2) {


        for (var i = 0; i < 30; i++) {
            phototemp = link_to_photo;
            itemname = link_to_item_name;
            itemcategory = link_to_item_category;


            $("#populateexplore")
                .append('
                       <div class="col-lg-3 col-md-4 col-sm-6" style="float:left">
                       <div class="card"><img src="' 
                       + phototemp 
                       + '" style="width:100%;height:200px;"><div class="container"> <h4> <b> ' 
                       + itemname 
                       + '</b></h4><hr><p>Category:'
                       + itemcategory 
                       + '</p></div></div></div>');
        }
    }).error(function() { sweetAlert("Cannot find the place"); });

The css of the card div is 

.card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px; /* 5px rounded corners */
     background-color: #CCC;
     margin-bottom: 10px;
}

The problem is that the output cads does not float on the left side and instead gives empty spaces on left

https://i.sstatic.net/c4Asg.jpg

Is there any way I can fill in the void spaces on the left side?

Upvotes: 0

Views: 43

Answers (1)

foxinatardis
foxinatardis

Reputation: 156

It looks like the third card has a greater height than the rest, and it is blocking the fifth card from floating to the left. Try resizing the cards to all have the same height and seeing if this corrects the issue.

Upvotes: 1

Related Questions