Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How To Reverse Footer Section in Mobile Arabic Pages ?

Avatar

Level 2


I have implemented footer using core components and imposed that experience fragment in template to visualize the footer section with respect to the language pages.

Currently using service pack 20.
1. Created experience fragment footer:

looks like this for en: myApp/language-Masters/en/site/footer/master.html

looks like this for ar: myApp/language-Masters/ar/site/footer/master.html

2. Used this en-XF in template while creating page for english the english footer will be dispalyed.

3. For Arabic pages arabic will be displaying. 

 

Issue: English footer is displaying correct order in english pages and in arabic footer is arabic footer displaying but in mobile view the footer is displaying in reverse. Attached screenshots PFA.

Desktop: 4 3 2 1

jair9686605_0-1716379542725.png

Mobile:

the social icons should go bottom

jair9686605_1-1716379615089.png

 


Client is not agreed for reversing with hack code CSS.
can we achieve this by using default AEM features, any pointers or suggestions.?

1 Accepted Solution

Avatar

Correct answer by
Level 2

Thanks.

We have fixed the issue by creating custom component.

 

 

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @jair9686605 

Yes, this issue can be resolved by using the default AEM features. You can use the "dir" attribute in the HTML tag to specify the direction of the text.

For example, in the HTML tag of your footer, you can add the "dir" attribute with the value "ltr" for English and "rtl" for Arabic. This will ensure that the text is displayed in the correct order for both languages, regardless of the device or screen size
how you can add the "dir" attribute to your HTML tag:

<footer dir="ltr">
<!-- English footer content -->
</footer>

<footer dir="rtl">
<!-- Arabic footer content -->
</footer>



Avatar

Level 2

@Raja_Reddy  Thanks for the reply Raja.

Footer is not a custom component, we have created footer with core components only. So there is no HTML for this footer xf.

In page component already "rtl" has been added.

 

 

Avatar

Correct answer by
Level 2

Thanks.

We have fixed the issue by creating custom component.