CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap
Yasmina Lembachar
Yasmina Lembachar

Reputation: 183

Bootstrap grid system within ng-repeat

I am trying to format the results of an ng-repeat directive using bootstrap's grid system so that each item returned occupies 6 out of the 12 columns available. It works fine, but there's a problem with the styling. This is the HTML:

<div class="bestof card col-lg-12 col-md-8">
    <div class="inner">
        <h1>Best of {{dest.name}}</h1>

        <div class="col-lg-6" ng-repeat="best in bestHotels | limitTo: 2 track by $index">
                <img class="best_thumbnail" ng-src="{{best.thumbnail}}"/>
                <p>{{best.description}}</p>
        </div> 

    </div> <!-- inner -->
</div> <!-- bestof -->

And the CSS:

.inner {
    border-top: 0;
    border-left: solid 1px #c4c4c4;
    border-bottom: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    box-shadow: 0 1px #c1c1c1;
    padding-bottom: 1em;
    padding: 1em;
    height: auto;
}

Basically, the inner div seems to just stop before enclosing ng-repeat, so I have a bottom border right after my <h1>, but before any of the content actually displays. Any ideas what's going on?

Upvotes: 0

Views: 1377

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

I think you want to make sure the .inner DIV has overflow:auto like this..

.inner {
    border-top: 0;
    border-left: solid 1px #c4c4c4;
    border-bottom: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
    box-shadow: 0 1px #c1c1c1;
    padding-bottom: 1em;
    padding: 1em;
    height: auto;
    overflow: auto;
}

Demo: http://bootply.com/3zT91GNLNI

EDIT - A better solution as suggested by @Pevara would be to make inner a row..

http://bootply.com/mv0T7iZHrX

Upvotes: 2

Related Questions