Filament•15mo ago

Spatie Translatable filament plugin not RTL aware

Hello, I use Arabic (RTL) an English (LTR) languages. The package does not change the direction of the form field when chaining to to Arabic (RTL). I think this is not implement before. Any suggestion on how to implement this behavior or there is any contribution to upgrade the package to support direction change when language change? Thank you

Solution:

np 🙂 in your resource add: ```...

Jump to solution

10 Replies

Lara Zeus•15mo ago

Spatie Translatable has nothing to do with the layout you need something like #language-switch

Mohammed AlozaibiOP•15mo ago

I don't speak about the interface I speak about this package https://filamentphp.com/plugins/filament-spatie-translatable#preparing-your-resource-class it gives a language switch, but the fields with Arabic language should be in RTL direction and en in LTR. However, it doesn't change, It is just the direction of the interface

Lara Zeus•15mo ago

yes, RTL and LTR is a UI related, so the package wont change the direction unless you change the layout

Mohammed AlozaibiOP•15mo ago

But I want the user to see the content of the field in the proper direction (not related to the interface it uses)

Lara Zeus•15mo ago

you can set extraAttributes https://filamentphp.com/docs/3.x/forms/fields/getting-started#adding-extra-html-attributes

Getting started - Form Builder - Filament

Mohammed AlozaibiOP•15mo ago

I have done something like that in Voyager admin panel before. using pure js. But filament world is using livewire and alpine which I don't have experience with yet Extra Attributes will be done once, not changed with the spatie language switch button

Lara Zeus•15mo ago

you can inject extraAttributes with livewire and do something like this not tested tho.. $livwire->getActiveFormsLocale() === 'ar' ? 'rtl' : 'ltr';

Mohammed AlozaibiOP•15mo ago

I see there is a solution, but I don't know to use it. I would appreciate a full explanation of where and how to implement this solution 🌹

Solution

Lara Zeus•15mo ago

np 🙂 in your resource add:

use Livewire\Component as Livewire;

use Livewire\Component as Livewire;

on the translatable field

TextInput::make('name')
  ->extraAttributes(function (Livewire $livewire) {
      $dir = ($livewire->getActiveFormsLocale() === 'ar') ? 'rtl' : 'ltr';
      return ['dir' => $dir];
  })

TextInput::make('name')
  ->extraAttributes(function (Livewire $livewire) {
      $dir = ($livewire->getActiveFormsLocale() === 'ar') ? 'rtl' : 'ltr';
      return ['dir' => $dir];
  })

Mohammed AlozaibiOP•15mo ago

You are a Hero! Thank you very much man. I really appreciate it 🌹

Gaming

Programming

Spatie Translatable filament plugin not RTL aware