sweatherly sweatherly - 4 months ago 79
AngularJS Question

Issue with ng-if, md-virtual-repeat height calculation

Using ng-if with md-virtual-repeat seems to break md-virtual-repeat's height calculation. md-virtual-repeat appears to work with ng-show, however, I am using md-virtual-repeat inside a grid-tile as part of a grid-list; ng-show hides the grid-tile but the tile still occupies the same space as if it weren't hidden.
Any ideas on a workaround?

Edit: Sorry for the poor explanation, it was clearer in my head. Please see codepen: http://codepen.io/sweatherly/pen/rLYPvE

ng-if="$mdMedia('md')"


The issue seems to be with md-tabs. If you decrease the screen size to medium and refresh, the md-list displays in each tab. However, if you start at a lg screen and decrease to md without refreshing, the rows are not shown.
I added a grid-tile with ng-show instead of ng-if to demonstrate how the grid-tile still occupies the same space when it is hidden instead of removed from the DOM.

A few of the elements nested under the grid-tile have their height set to 100%, however, many of them have height: 0px when this issue is occurring. It seems that the height is being calculated before the parent's height is accurately set. I'm guessing that setting a fixed height on the parent may likely solve it, however, one fixed height is not ideal for all screen sizes.

Answer

I was targeting the wrong element in my CSS. I was setting height by targeting each md-tab by it's id (Eg. #tab-content-0, #tab-content-1, etc). Ng-if removed and created more md-tabs, thus new tabs had new, different ids (Eg. #tab-content-2, #tab-content-3, etc).
The solution I found was to cast a broader net and use the element instead of id:

md-tab-content .md-virtual-repeat-container {
  height:calc(100% + 48px);
}
md-tab-content > div {
  height: calc(100%);
}

New codepen: http://codepen.io/sweatherly/pen/pbpKZO