css p:dataTable中的p:inputNumber右对齐

2uluyalo  于 2023-01-06  发布在  其他
关注(0)|答案(5)|浏览(171)

我编写了一个PrimeFaces(JSF / Java)p:dataTable,每个单元格都使用p:inputNumber。一切正常,但由于p:inputNumber的内容左对齐,表格看起来很粗糙。我尝试的所有格式都是格式化控件本身,而不是内容。
有什么方法可以右对齐p:inputNumber的内容吗?

e4yzc0pl

e4yzc0pl1#

如果有人在2020年或以后访问此页面:
对于PrimeNG 10,输入样式需要Angular ngStyle语法。只需执行以下操作:

<p-inputNumber [(ngModel)]="0.00" [inputStyle]="{'text-align': 'right'}"></p-inputNumber>

2023年更新:

以上仍然是一种可能性,但是当使用primeflex时,我更喜欢这个解决方案,使用已经可用的'text-right'类:

<p-inputNumber [(ngModel)]="0.00" inputStyleClass="text-right"></p-inputNumber>
oxiaedzo

oxiaedzo2#

对于inputNumber,存在属性inputStyleinputStyleClass
我设法让我的数字输入的右对齐如下:

<p:inputNumber value="0.00" inputStyle="text-align: right" />
d4so4syb

d4so4syb3#

我会这样做

span.ui-inputnumber > input[type=text] {
    text-align: right;
}

这应该能捕获所有的p:inputNumber。

wh6knrhe

wh6knrhe4#

在2021年与Angular 11和primeng v11.3.2@J-Eibe答案仍然有效,如果你只是想样式一个单一的p-inputNumber,但如果你想要一些更通用的,把下面的代码在你的style.css

.p-inputnumber-input{
  text-align: right;
}
wpcxdonn

wpcxdonn5#

添加以下css

.ui-datatable tr>td:nth-child(2)
{
  text-align:right;

}
    • 一个

相关问题