Dynamic App Alignment

[Nicole_Reiter]

• Goal: I'm building a public app in which I set the language dynamically based on user's device locale using javascript. Part of the languages I need to support are Hebrew & Arabic which requires a different position / alignment for my components.

• Steps: I see this is only configurable manually through the appearance section, so I would like to know how I could dynamically control my input components and their labels to support dynamic directions.

• Screenshots: <!--- share any relevant s
  

  

[WidleStudioLLP]

Hello @Nicole_Reiter ,

To dynamically adjust input components and labels for RTL languages (like Hebrew & Arabic) in Retool

1. Detect User Locale : Use JavaScript to detect the user’s language and check if it’s RTL:

const locale = navigator.language || navigator.userLanguage;
const isRtl = ['ar', 'he'].includes(locale.split('-')[0]);

2. Update Direction & Alignment : Conditionally set the text direction and alignment for input components and labels:

const inputComponent = document.querySelector('[data-testid="input-component-id"]');
const labelComponent = document.querySelector('[data-testid="label-component-id"]');

if (isRtl) {
  inputComponent.style.direction = 'rtl';
  labelComponent.style.textAlign = 'right';
} else {
  inputComponent.style.direction = 'ltr';
  labelComponent.style.textAlign = 'left';
}

3. Locale Change Handler: If the language changes dynamically, update the direction:

function updateLocale(newLocale) {
  const isRtl = ['ar', 'he'].includes(newLocale.split('-')[0]);
  inputComponent.style.direction = isRtl ? 'rtl' : 'ltr';
  labelComponent.style.textAlign = isRtl ? 'right' : 'left';
}

This approach lets you dynamically adjust the alignment of components based on the user's locale.

[Tess]

Hi @Nicole_Reiter,

Thanks for reaching out! It doesn't look like we support dynamically controlling the alignment of the text input label or the text component You could solve this by having different components that you show/hide dynamically.

Here's an example:

1. Drag and drop your first set of text input & text components. Set up some logic to determine when they will be hidden.
2. While they are hidden on the canvas, you'll be able to drag & drop another set of text and text input components on to the same exact place on the cavas
3. Add logic to the new set of components to determine when they'll be hidden (opposite logic of the original set of components)

See gif below: