Change CSS in only one Popup

  

Hey,

Im working on a Popup and I want it to be loaded in a specific position by indicating the TOP and LEFT css proprieties.

While I'm using the inspector I can do it without any kind of problem. When I do it on the CSS where the popup loads or the css on the popup page it does not apply...

I've put this in my screen:

SyntaxEditor Code Snippet

os-internal-ui-dialog 
os-internal-ui-widget 
os-internal-ui-widget-content 
os-internal-ui-corner-all 
os-internal-Popup 
os-internal-ui-draggable
{
    top:  190px;
   left:  180px;
}

because in the inspector those are the classes associated with the DIV that loads the popup... 

What am I doing wrong? My inspector gives me this:


PS: I know I cant change it in the theme CSS but I only want to apply this specific CSS to some Popups.

Thanks in advance

Cheers,

VC

Hi Vincent,

Did you check if the CSS is loaded at all and if so why the CSS is not applied (I mean given the CSS rules). For example in Chrome, the devtools let you see all CSS involved, and which rules overrule which.

Solution

Hi Vincent,

That div element is generated using javascript. So, you will have to use javascript to change those properties only after the popup is generated.

And since the popup is inside an iframe, one solution is to insert something like this piece of javascript in a xy expression in your popup:

"<script>
$('.os-internal-Popup', window.parent.document).css('top','100px');
</script>"

Basically, it will search for the elements with that class that are inside the parent of the iframe, and it will change the css of it.

Cheers,

José

Solution

José Costa wrote:

Hi Vincent,

That div element is generated using javascript. So, you will have to use javascript to change those properties only after the popup is generated.

And since the popup is inside an iframe, one solution is to insert something like this piece of javascript in a xy expression in your popup:

"<script>
$('.os-internal-Popup', window.parent.document).css('top','100px');
</script>"

Basically, it will search for the elements with that class that are inside the parent of the iframe, and it will change the css of it.

Cheers,

José

Hello, 

this option absolutely works. The only problem that Im facing now is that I have to use the "!important" so I can override the css applied by root. Do you guys know how can I do this? I tried 

"<script>
$('.os-internal-Popup', window.parent.document).css('top','100px !important');
</script>"


but the "!important" part does not seem to work and for what I've been reading. The .css function really does not work with the !important so I've been trying to search for a solution but nothing seems to work.

I tried these:

First) Define a class in the CSS editor of the Popup Screen for example with this:

SyntaxEditor Code Snippet

.importantRule 
{ 
top: 100px !important; 
}

and also have a x/y expression with this:

SyntaxEditor Code Snippet

$('.os-internal-Popup', window.parent.document).ReplaceWith('.importantRule');


no success with this, you guys have any suggestions?

Thanks a lot in advance

Cheers,

VC