Right align p:inputNumber in a p:dataTable

Question

I've coded a PrimeFaces (JSF / Java) p:dataTable that uses p:inputNumber for each cell. Everything works, but the table looks ragged due to the left-alignment of p:inputNumber's content. All of the formatting I've tried formats the control itself, not its content.

Is there any way to right-align the content of a p:inputNumber?

you are using custom template or cell editing? – Aravind May 21 '17 at 21:27 — Aravind, May 21 '17 at 21:27

J-Eibe · Answer 1 · 2023-01-03T15:02:39.583

6

If someone in 2020 or later is visiting this page:

For PrimeNG 10 the Angular ngStyle Syntax is needed for input style. Just do the following:

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

Update 2023:

The above is still a possibility. But when using primeflex I like this solution better, using the already available 'text-right'-class:

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

edited Jan 03 '23 at 15:02

answered Oct 15 '20 at 13:02

J-Eibe

152
4
12

The question is about PrimeFaces, not about PrimeNG. – Jasper de Vries Jan 03 '23 at 15:13

score 5 · Answer 2 · edited Jan 03 '23 at 15:19

5

For inputNumber there are attributes inputStyle and inputStyleClass.

I managed to get my number input's right aligned like this:

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

edited Jan 03 '23 at 15:19

Jasper de Vries

19,370
6
64
102

answered Sep 21 '17 at 12:48

Osmund Francis

771
10
27

score 2 · Answer 3 · answered May 22 '17 at 07:01

2

I would do something like

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

That should catch all p:inputNumber's everywhere.

answered May 22 '17 at 07:01

Jaqen H'ghar

4,305
2
14
26

You could also use this selector: `.ui-inputnumber .ui-inputtext`. It will come down to the same. – Jasper de Vries Jan 04 '23 at 11:02

score 1 · Answer 4 · answered Apr 19 '21 at 08:22

1

In 2021 with angular 11 and primeng v11.3.2 @J-Eibe answer is still valid if you just want to style a single p-inputNumber, but if you want some more generic, place the following code in your style.css

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

answered Apr 19 '21 at 08:22

Biiz

349
4
18

nice! found my own answer 1,5 years later and got an even nicer solution :) – J-Eibe Apr 20 '22 at 17:39
The question is about PrimeFaces, not about PrimeNG. – Jasper de Vries Jan 03 '23 at 15:14
Apart from that, it's basically https://stackoverflow.com/a/44106494/880619 but then for a different component library (which the question is not about). – Jasper de Vries Jan 04 '23 at 11:03

Right align p:inputNumber in a p:dataTable

4 Answers4