ng-if、md-virtual-repeatの高さ計算の問題

Question

md-virtual-repeatでng-ifを使用すると、md-virtual-repeatの高さ計算が損なわれているようです。 md-virtual-repeatはng-showで動作するように見えますが、グリッドタイル内でmd-virtual-repeatをグリッドリストの一部として使用しています。 ng-showはグリッドタイルを隠しますが、タイルは隠されていない場合と同じスペースを占有します。 回避策に関するご意見はありますか？

編集：説明が悪いので申し訳ありませんが、私の頭の中ではっきりしていました。 codepenご覧ください。http://codepen.io/sweatherly/pen/rLYPvE

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

問題は、MD-タブがあると思われます。画面サイズを中に減らして更新すると、各タブにmd-listが表示されます。ただし、lg画面から開始して、リフレッシュせずにmdに減少すると、行は表示されません。 ng-ifの代わりにng-showを使ってグリッドタイルを追加し、グリッドタイルがDOMから削除されずに隠れているときに同じスペースをどのように占有しているかを実証しました。

グリッドタイルの下にネストされた要素の高さは100％に設定されていますが、この問題が発生している場合、高さは0pxです。親の高さが正確に設定される前に高さが計算されているようです。私は、親の固定された高さを設定するとそれを解決する可能性があると推測していますが、固定された1つの高さはすべての画面サイズには理想的ではありません。

Answer 1

私はCSSの間違った要素をターゲットにしていました。私は各IDをID（例：＃tab-content-0、＃tab-content-1など）でターゲット設定して高さを設定していました。 Ng - 削除されてより多くのmd-tabsが作成されたため、新しいタブには新しいIDが追加されました（例：＃tab-content-2、＃tab-content-3など）。私が見つけた解決策は、より広範なネットをキャストし、代わりにIDの要素を使用していた
：

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

新codepen：http://codepen.io/sweatherly/pen/pbpKZO