代码之家 › 专栏 › 技术社区 › Michael H.

为与父日历相同大小的p日历涂底漆

primeng angular

0

Michael H. · 技术社区 · 6 年前

我使用的是一个表树中的p日历。如何使p-calendar字段的大小与它所在的单元格的大小相同?或者是一般的-我怎么能让它和父母的div一样大?

您可以使用style和inputStyle使用绝对宽度,但我的表是可调整大小的,因此在这种情况下不起作用。我在不同的地方尝试了推荐的方法:

<p-calendar appendTo="body"  [style]="{'width':'95%'}" [inputStyle]="{'width':'95%'}"
</p-calendar>

但这不起作用,因为日期选择器的按钮有一个固定的大小。

在我看来,这是一个非常基本的要求-能够使一个组件的大小与其父组件相同。真的很惊讶这没用。

谢谢, 迈克尔

2 回复 | 直到 6 年前

1

4

KimCindy 6 年前

这对我有效:

<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [timeOnly]="true"></p-calendar>

2

1

DirtyMind 6 年前

我试着做到这一点:

添加您自己的类来覆盖日期容器的CSS。正如我添加的class=“treetableDate”

    <p-calendar [(ngModel)]="date1" 
[style]="{'width':'70%'}" [inputStyle]="{'width':'70%'}" class="treetableDate"></p-calendar>

现在重写日历组件的CSS。如下所示:

.treetableDate .ui-widget-content{
    width: 80%; // or in pixel depends how much width you want.
}

注意:不要直接重写.ui小部件内容。否则将影响应用程序中每个组件的宽度。使用您自己的类时,它只会影响该特定元素。