Equal height of dynamic column in backbone js

Question

I am trying to show item list in a div of my home page.

Home.html :

<div>
    <div id="header">
      <div class="header-left">
          Item
      </div>
      <div class="header-center">Load More</div>
      <div class="header-right"></div>
      <div class="header-line"></div>
    </div>
    <div id="containeritem">
      <!-- Here I want to write item list -->
    </div>
</div>

css :

.containeritem{
  float: left;
  height: 100%;
  position: relative;
  width: 800px;
}

.itemTemplate {
   border: 1px solid #dddddd;
   float: left;
   margin-bottom: 8px;
   margin-left: 8px;
   width: 190px;
}

Home View :

render : function(){
  var itemCollection = new ItemCollection(itemlistdata);
  var itemListView = new ItemListView({collection : itemCollection, el : '#containeritem'});
  itemListView.render();
}

ItemList View :

var ItemListView = Backbone.View.extend({
    initialize: function(){
    },
    render: function(){
        this.collection.each(function(_itemData){
            var itemView = new ItemView({model : _itemData});
            this.$el.append(itemView.el);
        },this);
    }
});
return ItemListView;

Item View :

var ItemView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    className : 'itemTemplate',
    render: function(){
        var _item = _.template(ItemTem);
        this.$el.html(_item(this.model.toJSON()));
    }
});
return ItemView;

Item Template :

<div>
  <div class="itemCorner">&nbsp;</div>
  <div class="itemBrand">
    <img src="<%=Path + BrandImage%>">
  </div>
  <div class="itemImg">
    <img src="<%=Path + PictureName%>">
  </div>
</div>

<div class="bottomRow" style="bottom: 0;height: 90px;">
   <div class="itemName">
      <%=Name%>
    </div>
    <div class="itemPrice">
      <%=PriceShow%>
    </div>
</div>

enter image description here

Each column is an ItemView and combine together by ItemListView.
height of container and each item are set to 100%
I've tried this solution : CSS - Expand float child DIV height to parent's height , but each column of mine will stick together, it is not what I want.

What I want is to set these column's height to be equal to the tallest height of the items; since the content of each div is dynamically generated, I can not make it.

Any help would be appreciated. Please excuse my ignorance if I've completely missed something here.

score 1 · Answer 1 · answered Aug 23 '14 at 09:39

1

Well, Here you can set height to your itemImg class. Its obvious that product image dimension are always different.

Also, do not set the height and width in the pixel for the image. Instead set the height and width for the image container class.

So your CSS might be following :

.itemImg {
    width: 400px;
    height: 400px;
    border: 1px solid;
    text-align: center;
    float: left;
    margin: 20px;
    position: relative;
    background:#CCC;
}
.itemimg img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

And, html will be same like you have right now:

FIDDLE

In the fiddle i have use three different dimension images:

answered Aug 23 '14 at 09:39

Husen

955
1
6
16

Husen, I don't want to set image's height, let it automatically float by image's width. – Nothing Aug 23 '14 at 09:45
try this code, it will take image actual width if its not greater than the container width. If the image is smaller than the image container than it will aligned to center. Same thing happened with height. it will take image actual height if its not greater than the container height. If the image is smaller than the image container than it will aligned vertically center. – Husen Aug 23 '14 at 10:33
I found a perfect solution here http://stackoverflow.com/questions/13586092/jquery-equal-heights-and-dynamic-content, anyway thanks Husen. – Nothing Aug 24 '14 at 02:53

score 0 · Answer 2 · answered Jan 31 '17 at 10:36

 (function(jQuery) {
  jQuery.fn.maxHeight = function() {
    element = this;
    if ( jQuery(window).width() > 768 ) {
      var maxHeight = 0;
      element.height('auto');

      element.each(function(i, value){
        itemHeight = jQuery(value).height();
        if ( itemHeight > maxHeight ) {
          maxHeight = itemHeight;
        }
      });

     element.height(maxHeight); 
    } else {
      element.height('auto');
    }
  };
}(jQuery));

jQuery('.itemImg').maxHeight();

Equal height of dynamic column in backbone js

2 Answers2

Linked