CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joshua Ohana
Joshua Ohana

Reputation: 6131

Setting height on a div causes p element's text to appear in wrong place

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'

enter image description here

Upvotes: 1

Views: 59

Answers (2)

DebRaj
DebRaj

Reputation: 599

You can add a class to your data wrapper of col-md-4 and apply the css to it. Because if you mention grid-data > div it will apply to all of your divs inside it. You can do like this:

HTML:

<div ng-controller="MyCtrl">
  <div class="grid-data row">
    <div class="col-md-4 grid-data-content" ng-repeat="item in gridData">
      <img ng-src="{{item.iconUrl}}" />
      <div>{{item.title}}</div>
      <p>{{item.description}}</p>
      <span>{{item.groupLabel}}</span>
    </div>
  </div>
</div>

CSS:

.grid-data-content {
  position: relative;
  height: 300px;
  margin-bottom: 15px;
  overflow: hidden;
}

.grid-data-content img {
  display: block;
  width: 100%;
  height: auto;
}

.grid-data-content p {
  white-space: nowrap; 
    width: auto;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

Fiddle: http://jsfiddle.net/9vu89ayr/1/

Upvotes: 1

xpy
xpy

Reputation: 5631

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
}

Upvotes: 1

Related Questions