Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Assistance with Implementing RTL & LTR Toggle for Metronic React 8.2.7


Hi Support Team,

I'm working on adding both RTL (Right-to-Left) and LTR (Left-to-Right) functionality to my local development environment. I need a toggle switch that allows users to switch between these layout directions.

Could you guide me on how to set up RTL support in my project? Specifically, I'd like to know how to configure my stylesheets or use libraries to make the transition between RTL and LTR smooth.

Thanks in advance for your help!

Thanks,
Akib Dahya


user
Akib Dahya 1 year ago
RTL React Bootstrap 5
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Colby Adkins 1 year ago

Hi Akib,
To add RTL support, you can follow these steps:
Toggle Switch: Implement a toggle that changes a CSS class on your main container (e.g., dir-rtl or dir-ltr).
Stylesheets: Create separate stylesheets for RTL and LTR layouts. Use the dir attribute in your HTML to apply the correct stylesheet based on the selected layout.
CSS Adjustments: Use logical properties in your CSS (e.g., margin-inline-start instead of margin-left or eggy car ) to simplify your styles.
Libraries: Consider using libraries like react-i18next for React or similar internationalization libraries that support RTL.
This setup should make the transition between layouts smoother. Let me know if you need further details!


user
Sean Author 1 year ago

Hi,

Metronic 8 React does not support RTL/LTR toggling. We will enable this feature for Metronic 9 React in a few weeks. Please consider using Metronic 9 React which we will be releasing in 1-2 days. Expect this big update soon.

Regards.


G
Guest 1 year ago

To implement RTL support in your project, consider using a CSS framework that supports direction toggling or adding a class to your body element to switch stylesheets, ensuring that all text and layout elements adjust seamlessly with the toggle switch.
https://devs.keenthemes.com/question/tailwind-metronic-datatable-with-searchslice master game


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(