Setting the height on a div causes the text of the p element to appear in the wrong place

advertisements

I have a div, with a repeating element wrapped inside using bootstrap columns. I want to have a fixed height for the outer div. When I set this, it causes the second text element inside (either div or p) to drop down to the lower div. When I remove the height setting, the text re-appears.

I have tried messing with a variety of text-overflow options to no avail.

I was unable to reproduce the same issue on jsfiddle, it throws the text in the proper area. http://jsfiddle.net/HB7LU/23504/

Relevant code:

<div class="grid-data">
    <div class="col-md-4" ng-repeat="item in gridData | startFrom:currentPage*pageSize | limitTo:pageSize | orderBy:orderBy">
        <img ng-src="{{item.iconUrl}}" />
        <div>{{item.title}}</div>
        <p>{{item.description}}</p>
        <span>{{item.groupLabel}}</span>
    </div>
</div>

and CSS

.grid-data {
  padding: 15px 15px 0 15px;

  div {
    border: 1px solid $off-white-border;
    height: 500px;
  }
  img {
    width: 100%;
  }
}

The image below illustrates what I mean, look at the highlighted text 'Avian'


This selector:

.grid-data {
  div {
  }
}

compiles to:

.grid-data div {
}

which means every div inside .grid-data.

That's where the second text takes it's height from.

Instead you should use:

.grid-data {
  > div {
  }
}

Or, for a more clear solution, add a class to the wrapping div and use that in your selector:

.grid-data {
  .other-class
}