[SOLVED] J! 3.4 Fabrik 3.3.1 - CSS for RTL

[vivoices]

I am working on a Joomla/Fabrik application with 3 locales.
For English and German all works fine, but for RTL layout Fabrik does not inherit the rtl.css from Joomla and Gantry.

How can I set the RTL orientation for Fabrik Lists, Forms etc. ?

Thanks,
Udo

 

[troester]

Did you test with the Protostar template coming with Joomla? Maybe the Gantry template is conflicting.
You can add custom css to Fabrik form and list templates

• Form and Details Templates
• List templates

 

[vivoices]

Thanks Troester,
I will add the necessary classes to the .less files in Gantry.

Since there is a translation for ar-AA in components/com_fabrik/language, I was hoping that the css for rtl languages exists somewhere as well.

 

[troester]

Is your Gantry template BS2?
Fabrik needs a Joomla BS2 template (like Protostar).

 

[vivoices]

I am using the latest version of Gantry, 4.1.26. I assume it uses Boostrap 3.x.

Everything is looking good so far with just a few additions to one Gantry .less file and adding language code to 3 Fabrik files.

<ul class="nav nav-pills pull-<?php if ($lang->isRTL()) : ?>right<?php else: ?>left<?php endif ?>">

For now the only problem is that the delete button icon in lists is not displayed because the icon tag has both classes assigned, icon-delete and icon-remove.
The class needs to be only icon-remove, but I cannot find where "icon-delete" and "icon-remove" are assigned.
Even after some changes to .js and .php files, still both classes are assigned.

Would appreciate some hints.

 

[troester]

With BS3 you may run into issues.

http://fabrikar.com/forums/index.php?threads/delete-icon-displayed-but-empty-icon.40709/

 

[vivoices]

Adding your suggested

i.icon-delete.icon-remove::before {
    content: "I";
}

to the Gantry css works.
Adding it to a custom_css.php of the list template has no effect.

The extra css displays the icon for the icon-delete class now.
I would rather display the icon-remove class' icon since it is aligning better with the rest of the buttons.

 

[troester]

Ah, yes, you can't add css with" to the custom_css.php because it's doing
echo "...";
You must change to single quotes.

If you don't like
content: "I"
check in the Gantry template what is used there.

 

[vivoices]

i.icon-delete.icon-remove::before {
    font-family: fontawesome !important;
    content: '\f00d';
}

does the trick.

Thanks a lot!