[英]Sticky header of p-table not working with [scrollable] = true in Primeng.?
I am trying to implement both [scrollable]="true" and stick header in p-table of PrimeNg.我正在尝试在 PrimeNg 的 p 表中同时实现 [scrollable]="true" 和粘贴标题。 But sticky header works fine if I won't use the scrollable.但是如果我不使用可滚动的,粘性标题可以正常工作。 If I implement both, scrollable is working but sticky header is not working.如果我同时实现两者,则可滚动的工作正常,但粘性标题不起作用。
I used the following css from primeng for the sticky header.我使用来自primeng的以下css作为粘性标题。
:host ::ng-deep .ui-table .ui-table-thead > tr > th {
position: -webkit-sticky;
position: sticky;
top: 69px;
box-shadow: 1px 3px 6px 0 rgba(32,33,36,0.10);
}
@media screen and (max-width: 64em) {
:host ::ng-deep .ui-table .ui-table-thead > tr > th {
top: 99px;
}
}
and for scrollable I used the below code, [scrollable]="true"
对于可滚动,我使用了以下代码[scrollable]="true"
<p-table [columns]="cols" [value]="cars1" [scrollabe]="true">
...
<th *ngFor="let col of columns" >
If I remove [scrollable]="true"
sticky header works fine.如果我删除[scrollable]="true"
粘性标题工作正常。 How can I make it works both things.?我怎样才能让它同时工作。? Here is the stackblitz .这是堆栈闪电战。
The structure in the scrollable table is different.可滚动表中的结构不同。 so you should give the sticky
style to this ancestor element instead:所以你应该给这个祖先元素设置sticky
样式:
:host ::ng-deep .ui-table-scrollable-header{
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1000;
}
See it live on stackblitz 在 stackblitz 上实时查看
Minimal example to describe the issue:描述问题的最小示例:
the below sticky
header is not working because we added sticky to the wrong element.下面的sticky
标题不起作用,因为我们向错误的元素添加了粘性。 to fix it we should add the sticky
to .header
instead:要修复它,我们应该将sticky
添加到.header
:
<div style="height: 1500px; background: #def;">
<div class="header" style="background: #fed;"><!-- <- instead add sticky to here -->
<div style="position: sticky;top: 0;">header</div> <!-- <-- not here -->
</div>
<div class="body" style="background: blue; height: 1500px;">
<div>body</div>
</div>
</div>
minimal example buggy version |最小的示例越野车版本| minimal example fixed version最小示例固定版本
我也刚刚遇到了这个问题,在深入研究了它的原因之后,我最终打开了一个问题,我对这个问题给出了自己的看法,也许他们最终会对可滚动的工作方式https:\/\/github<\/a>做出一些改变。 com\/primefaces\/primeng\/issues\/11099<\/a>
"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.