0

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?

JRulle
  • 7,448
  • 6
  • 39
  • 61
Yasmina Lembachar
  • 183
  • 1
  • 1
  • 11
  • 2
    Can you reproduce your issue in a JSFiddle or a Codepen? This question will likely require access to more of your CSS (i.e. `bestof` and `card` classes). – JRulle Jan 26 '15 at 20:32
  • 1
    Also, does it render correctly without `ng-repeat` if you just placed two divs side-by-side? – New Dev Jan 26 '15 at 20:37
  • 3
    where is the `.row` that should be parent of any `.col` element ? – Pevara Jan 26 '15 at 20:46
  • possible duplicate of [Container div ignores height of floated elements](http://stackoverflow.com/questions/2442934/container-div-ignores-height-of-floated-elements) – isherwood Jan 26 '15 at 20:49
  • @Pevara Thanks! Didn't think skipping on a .row would be much of a problem, but I was clearly wrong. – Yasmina Lembachar Jan 26 '15 at 21:00

1 Answers1

2

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624