Hi,
My application has a CSS rule that makes the screen looking different when the window's height gets below 800 px. This rule works also when I develop my application using Service Studio. And this, in turn, makes my project looking different, depending on the state of the bottom SS panels, whether they are expanded or collapsed.
It is a little annoying, so I'd like to enhance the CSS rule and make it not working when in Service Studio.
So, the question is: is there a method to recognize (in CSS) whether we are working under control of Service Studio or not?
Regards
Tomasz
Check this post
https://www.outsystems.com/forums/discussion/9506/specific-service-studio-css-tags/
You can use this.
-servicestudio-<Css property Name>: <Property Value>
Regards,
Márcio
Hi Tomasz,
there is the opposite thing.
You can create a css property only visible in Service Studio by using:
If you can use it in the height to override the general property it should solve your problem.
Hi all,
Being inspired by above posts, I checked whether the HTML, created inside Service Studio, gets some class like "servicestudio" (like "desktop" or 'tablet" when run in a browser) . So, the following rule:
@media (max-height: 800px) { :root { ....
I've extended this way:
@media (max-height: 800px) :not(.servicestudio) { :root { ....
And it works!
Thanks for the inspiration.
Ups, it only seemed to work :-(
So, the issue remains open. The rule, I need to modify, defines variables rather than css properties and the suggested solution cannot be directly applied.
In my case, i have a full screen Loader css added which does not allow clicking or selecting any widget behind the Loader and due to this I have go to Widget tree everytime to find the widget and select.In loader css class i had few properties like:
background-color: rgba(0, 0, 0, 0.1);
z-index: 99;
and these were stopping me from clicking/selecting any widget behind the loader. So I added 2 more properties in the same class as below
-servicestudio-background-color: rgba(0, 0, 0, 0);
-servicestudio-z-index: 0;
and after adding them, css effect is gone/removed in service studio.
So, i think whatever property you don't want to be applied in Service studio just mention them with prefix as below:
-servicestudio-<yourproperty: change value so it is not applied>
This worked for me, hope it works for you as well.
Himanshu