Log in to AnswerLog in to Follow
UserImage.jpg
Tomasz M. Lipinski
24Views
4Comments
CSS rule indicating working in Service Studio
Question
CSS
Service Studio

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

0
0
07 Jun

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

2
0
07 Jun

Hi Tomasz,

there is the opposite thing.

You can create a css property only visible in Service Studio by using:

  •  -servicestudio-<Css property Name>: <Property Value> 

If you can use it in the height to override the general property it should solve your problem.

Regards

2
0
07 Jun

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.

Regards

Tomasz

2
0
08 Jun

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.

Regards

Tomasz

0
0
6 days ago
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.