Css 如何使PrimeNg VirtualScroller响应高度?
我有一个Priming VirtualScroller,它有一个属性scrollHeight,可以固定一些高度。我试图将100%设为值,但它不接受。还尝试将样式或类添加到组件以将高度设置为100%,但效果不佳。如何使高度与浏览器窗口的高度相同Css 如何使PrimeNg VirtualScroller响应高度?,css,angular,layout,primeng,virtualscroll,Css,Angular,Layout,Primeng,Virtualscroll,我有一个Priming VirtualScroller,它有一个属性scrollHeight,可以固定一些高度。我试图将100%设为值,但它不接受。还尝试将样式或类添加到组件以将高度设置为100%,但效果不佳。如何使高度与浏览器窗口的高度相同 <p-virtualScroller [value]="lazyCars" scrollHeight="40em" [itemSize]="150" [rows]="50" [cache]="false" [la
<p-virtualScroller [value]="lazyCars" scrollHeight="40em" [itemSize]="150" [rows]="50" [cache]="false"
[lazy]="true" (onLazyLoad)="loadCarsLazy($event)" [totalRecords]="totalLazyCarsLength">
<ng-template let-car pTemplate="item" let-i="index">
<div class="ui-g car-item mt-1">
<div class="ui-g-12 ui-md-2">
<div class="ui-g-12 ui-md-12" style="font-size: 11px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'dd/MM/yyyy' }}</div>
<div class="ui-g-12 ui-md-12" style="font-size: 24px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'HH:mm:ss' }}</div>
</div>
<div class="ui-g-12 ui-md-2" style="display: flex">
<img class="rounded-image" src="../../assets/images/profileplaceholder.jpg" width="115" height="100" />
<!--<i style="font-size: 5rem; align-self: center;" class="pi pi-users mx-auto"></i>-->
</div>
<div class="arrow-left"></div>
<div class="ui-g-12 ui-md-5 chat-window">
<div class="ui-g">
<div class="ui-g-10 ui-sm-6">Autor: {{car?.autor}}</div>
<h2 class="ui-g-10 ui-sm-6 ml-2">Evento: {{car?.evento}}</h2>
</div>
</div>
</div>
</ng-template>
<ng-template let-car pTemplate="loadingItem">
<div class="ui-g car-item empty-car-item">
<div class="ui-g-12 ui-md-2">
<div class="empty-car-item-index"></div>
</div>
<div class="ui-g-12 ui-md-2">
<div class="empty-car-item-image"></div>
</div>
<div class="ui-g-12 ui-md-8">
<div class="ui-g">
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
</div>
</div>
</div>
</ng-template>
</p-virtualScroller>
{{generateDate()|日期:'dd/MM/yyyy'}
{{generateDate()|日期:'HH:mm:ss'}
Autor:{{car?.Autor}}
事件:{{car?.Evento}
这可以使用嵌套的FlexBox来完成。我已经解释了这些如何与角的工作。将该解决方案应用于该问题需要将flexbox middle类的等价物应用于构成虚拟滚动区域的每个元素:
p-virtualScroller,
/deep/.ui virtualscroller,
/deep/.ui virtualscroller内容,
/deep/.ui virtualscroller列表,
/深/cdk虚拟滚动视口{
显示器:flex;
弹性:1;
弯曲方向:立柱;
}
使用该样式时,p-virtualScroller
元素的scrollHeight
属性不应再设置,因为组件将根据父元素的高度进行调整:
{{obj.name}
完整的代码和工作结果的演示是可用的