how can Form TextInput contents and labels be right-justified?

[theo-1]

I tried ->extraAttributes(['align' => 'right']) but it has no effect.

How can I get the contents and label right-justified in a form?

[cawecoy]

Something like ->extraAttributes(['class' => '!text-right']).

text-right is a tailwind class (and you might need the ! which adds !important to the style).

I don't know if it's what you are looking for and I haven't tested it.

Alternativelly, you might need to define and use a custom CSS class like my-custom-right-alignment to be able to define some inner form styles in your resources/css/filament/admin/theme.css (if you don't have this file, it's because you haven't created a custom theme yet).

And don't forget to run npm run build.

[theo-1]

I tried ->extraAttributes(['class' => '!text-right']) but it had no effect.

Also (1) added this to my theme.css
.myx-right-align { text-align: right !important; }
(2) ran npm build, then (3) chained ->extraAttributes(['class' => 'myx-right-align'])

Also no effect.

Looking at that field in dev tools, text-align: start; stubbornly remains in both cases.

[cawecoy]

Maybe there is some deafault tailwind class on the elements making them aligned to left/start. You have to give a way to select each element that you want to align to the right. Look at the HTML and find good selectors to build your CSS rules.

PS: use Filament hook classes and avoid using Tailwind classes (like text-right I told you before) to select the elements when building your CSS rules. The Tailwind classes should be used when adding classes to element, not to select the element by its class.

Example: https://codepen.io/cawecoy/pen/ExMRxNM

[theo-1]

Yeah there is an fi-select-input class on the field but that would apply to all select fields.

There is also a very specific (long string-named) id but that would be a bad hack!

It's kind of basic: amount fields should be right-justified so that a summation of values (presented on multiple lines) aligns to the right, the very way we all learnt to add in elementary school :-).

Except I can somehow inject my own class, I don't see how to do this. Except I misunderstand.

[cawecoy]

You have to pick the selectors in a more restrictive way like .only-the-parents-i-want-to-select .fi-select-input { /* my CSS rules */ }. You have to look at the DOM tree to find out these selectors manually, the Chrome inspector generates automatically poors selectors (so long, "hacky", "unsafe", "polluted" with Tailwind classes and so on).

I use child combinator and :has() a lot in those cases that I cannot find an easy and proper CSS class, element ID or HTML tag to select directly.

Feel free to share some code.

[tonybyng]

I just added a

->extraInputAttributes(['style' => 'text-align: right;'])

on my numeric input box and it worked. Haven't figured the label though !

Hope that helps