CODEWITHSUNDEEP
javascriptjquerycssangularjstwitter-bootstrap
EddyG
EddyG

Reputation: 2119

Bootstrap thumbnails maintaining height with angular-vertilize

I am having an ng-repeat that loops on items to display them in bootstrap thumbnails.

Since data is dynamic, I used angular-vertilize module to give the same height to the thumbnails.

<div vertilize-container class="row">
<div ng-repeat="story in news" class="col-sm-6 col-md-4">
    <div vertilize class="thumbnail">
      <img src="{{story.imgpath}}" alt="...">
      <div class="caption">
        <h3>{{story.title}}</h3>
        <p>{{story.subtitle}}</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

angular-vertilize succeeded in giving the same size for the thumbnails:

Correct display

But when

OR

Wrong display

The content doesn't display correctly. However, resizing the browser size simply adjusts the content to be displayed correctly.

I think that while bootstrap trying to resize the images, vertilize is calculating the height of the thumbnails, and that's why the display crashes. Without having images, it works.

Running plnkr example: http://plnkr.co/edit/hT420wt10F5p02gOQu2M?p=preview

A link to angular vertilize module: http://sixthdim.github.io/angular-vertilize/ (after I searched for a while, I found it as the best one)

Upvotes: 2

Views: 933

Answers (2)

Gaurav Kumar Singh
Gaurav Kumar Singh

Reputation: 1570

I think you need set the height of image inside the ng-repeat, because if you have slow network then image takes some time to download and the angular-vertilize plugin neglect the image height in calculation.

You can use a class instead of inline styling

Working Plunker

<img ng-src="{{story.imgpath}}" alt="..." style="height: 150px;">

Note: I've updated src to ng-src for dynamic binding

Upvotes: 1

lin
lin

Reputation: 18392

The problem comes up because your image resource is loaded async. In the moment angular-vertilize is executed the image resource is not loaded so the auto resize failed. I extended the missing feature for "async" resource loading in angular-vertilize v1.0.1. I fixed the problem in a clean way without having fixed image heights work with. In this way you are able to have responsive images.

Just add the new child directive vertilize-resource to all async loaded resources inside your vertilize-container to ensure that vertilize is updating your containers once some resources has been loaded. Check this runnable plnkr and take a look at angular-vertilize.min.js inside this plnkr. In that way you are able to use this feature regardless of the number of async loaded resources.

<div vertilize-container class="row">
  <div ng-repeat="story in news" class="col-sm-6 col-md-4">
    <div vertilize class="thumbnail">
      <img vertilize-resource ng-src="{{story.imgpath}}">
      <div class="caption">
        <h3>{{story.title}}</h3>
        <p>{{story.subtitle}}</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

I will go to push this feature to Github https://github.com/Sixthdim/angular-vertilize so its maybe available pretty soon. Here is the current pull request https://github.com/Sixthdim/angular-vertilize/pull/23 its maybe released in the next days.

Upvotes: 1

Related Questions