PopUp ignores CSS language locale rules

Hi everyone.

So i have been working with with a language locale that is RTL, which forces me to make severe changes in all CSS, so far i have been able to fix all styles with a CSS Class (.ar-AE), but i found that that Popups simply ignore that, so i am not able to style them with RTL rules. 

Any suggestions on how to make that happen?


P.S. Using modal is not an option

I'd start by using the browser dev tools (F12 in most browsers) to view what CSS is applied to the popup element(s). It may be that some of the CSS on the popup is overriding yours, or that you need to apply at a different level.

Update: 

Quick follow-up...looking at the markup in the dev tools, note that the Popup is implemented using an iframe, so that may affect how your CSS is being applied.

You may also want to have a look at this thread, as it may help you apply the styles you want to the popup:

https://www.outsystems.com/forums/discussion/34001/change-css-in-only-one-popup/

Thank you for your answer, but that thread also ends with no end solution.


I use the same js I have for the rest of the layouts, but for the pop ups it does not work: 

SyntaxEditor Code Snippet

"$(function(){
        document.body.className += '" + GetCurrentLocale() + "';
});"


But it does not work with the pop ups, and i cannot find any info regarding that.

JT wrote:

Thank you for your answer, but that thread also ends with no end solution.


I use the same js I have for the rest of the layouts, but for the pop ups it does not work: 

SyntaxEditor Code Snippet

"$(function(){
        document.body.className += '" + GetCurrentLocale() + "';
});"


But it does not work with the pop ups, and i cannot find any info regarding that.

Hello JT,

Are you want to apply class on popUp body? If yes you can add without javascript.

Hello Suhas,


Yes that could be a soluction if I only wanted to add a 'fixed' class, but i need a dynamic class (ar-AE) to override the css styles from ltr to rtl (right to left). In other words, if the user is using english as language, everything has one basic style, but if he chooses an rtl language such as arabic, then i need to override those rules with ar-AE classes. I have been able to work like that and override every rule so far, with the exceptions of the Popups. Thats what i need help with, but it looks like (from all the research i made), nobody knows how.

Hello JT,

Use the local variable and assign value to local variable in preparation.

Solution

Just to let you all know, i am the one to blame for this one! The js is fine and it works great, i was just using the wrong layout in Popup instead of the layout that had the js. Noob mistake...


Thank you all for your (waste) of time!

Solution