themes icon indicating copy to clipboard operation
themes copied to clipboard

TextField align right, (on rtl direction) result in no padding.

Open pipech opened this issue 10 months ago • 5 comments

Use-case

In some use-case, it's a good idea to align number in text field to right, so it would be easy to compared with other fields.

image

Actual Result

Using text-align: right

Result in no padding.

image

Using direction: ltr

It does display number with padding but the cursor behavior is incorrect, cursor will goes right when pressing left arrow.

image

Desire result

Without changing the direction, it would be nice to have a way to properly align text right.

Cause

Since radix using text-indent for the padding. It only works with the direction of the text. image

Fix ??

Changing text-indent to padding-left and padding-right seems to solve the problems.

image

image

pipech avatar Apr 04 '24 02:04 pipech

There’s a couple good reasons for why we use text-indent, but I agree that there should be a first-class way to do right-aligned input fields; center-aligned too. We'll look into it at some point.

For now feel free to use inline style overrides to achieve that.

vladmoroz avatar Apr 04 '24 07:04 vladmoroz

Another issue pops up when the text gets really long – there's no padding on the right side.

image

pipech avatar Apr 04 '24 11:04 pipech

Another issue pops up when the text gets really long – there's no padding on the right side.

image

Pretty sure that one is intentional @vladmoroz right?

benoitgrelard avatar Apr 04 '24 12:04 benoitgrelard

Another issue pops up when the text gets really long – there's no padding on the right side.

That's intentional – what the problem here?

vladmoroz avatar Apr 04 '24 12:04 vladmoroz

Oh sorry, I always thought there should be padding on both sides.

I get that having padding on both sides looks nicer, but maybe the lack of padding could serve as a visual clue that the text is overflowing, right?

pipech avatar Apr 05 '24 04:04 pipech