Ignore css styles in outsystems preview

Ignore css styles in outsystems preview

  

I'm having this problem where my container has an absolute position and it is hidden on the screen but exactly hidden but it has this style of "position: absolute; right: -300px" so I can hide it on the screen. But the problem is it's also taking effect on the preview so I need to adjust the css again just to see the container on the preview again for editing.

Is there a workaround on this one.

Hi Christian Meniano,

Do you want to hide your container?

If yes

just use "display:none" property instead of "position: absolute; right: -300px" .

so you can see your container in preview but not when it runs.

Hi Christian, 

To hide or show any container, You can toggle its display property as True or False depending on your condition.

Sachin


Hello Christian,

When you set the style, the canvas will "stretch" and you should see the horizontal scroll bar to show up.

The same thing must happen if you set view in the canvas to preview:

Aren't you seeing the horizontal scroll bar?

Cheers,
Eduardo Jauch

No, what I want is to have the style "position: absolute; right: -300px" but still visible in the preview. Because it will not be visible in the preview if i apply that style which means i will not be able to interact or do something in the container.

Eduardo Jauch wrote:

Hello Christian,

When you set the style, the canvas will "stretch" and you should see the horizontal scroll bar to show up.

The same thing must happen if you set view in the canvas to preview:

Aren't you seeing the horizontal scroll bar?

Cheers,
Eduardo Jauch


No, Unfortunately I can't see the scrollbar 

Funny, the image is being "cut"...
Anyway, both in preview mode and not preview, with your CSS, in my ServiceStudio, the scroll bar appears and I can reach it.

In any case, you can ALWAYS reach your screen elements through the widget tree:

Eduardo Jauch wrote:

Funny, the image is being "cut"...
Anyway, both in preview mode and not preview, with your CSS, in my ServiceStudio, the scroll bar appears and I can reach it.

In any case, you can ALWAYS reach your screen elements through the widget tree:


Still can't see it, I want to see the preview though rather than just adjusting it through widget tree.

Hi,

May be Christian working on Mobile application and Eduardo showing web demo thats why Christian is not able to see scroll bar :)





I'm working on a web application. I think it has something to do with the theme. I'm currently using dublin theme

You have one option. A bad one.

Apply the style using the extended properties.

In the style property, apply a different style that make it visible.

In runtime the extended will overwrite the other

But the container is still showing when i run it in the browser. What i want is to be able to view it in the preview while on the "position: absolute; right: -300px". So basically, hidden in browser preview but showing in outsystems preview.

Hey Christian,

For that, you need to apply service studio style class to get over it

 -servicestudio-display: none; or whatever style you need.

For reference use the below link

https://www.outsystems.com/forums/discussion/15205/hide-content-from-service-studio-preview/


Regards

PAnkaj


Pankaj Pant wrote:

Hey Christian,

For that, you need to apply service studio style class to get over it

 -servicestudio-display: none; or whatever style you need.

For reference use the below link

https://www.outsystems.com/forums/discussion/15205/hide-content-from-service-studio-preview/


Regards

PAnkaj


I've already tried 

SyntaxEditor Code Snippet

-servicestudio-position: absolute;
    -servicestudio-right: -282px;

but i still can't see it on the preview.

Hi,

Use "position:relative" property before your "position:absolute" proerty of div.


Hello Christian,

I think we need to clarify some things.

If you set the position of an element as absolute, and the right as -somethinginpixels, what will happen will depend on WHERE it is. 

You will be able to hide it, but ONLY if it is inside another element, like a container, that has the position defined as relative, absolute or fixed, and has overflow set to hidden.

It seems something like this, as you tell you don't see the scroll bar.

In this case, what you have to do is to change this overflow hidden you have somewhere.

In this case, lets say you have something like this for the element around your div:

.class {

position: relative;

overflow: hidden;

}

Add to inside the class:

-servicestudio-overflow:initial;

Cheers,

Eduardo Jauch

Do you mean like this?

<div style position: relative;overflow: hidden;>

   <div style position: absolute; right: -pixel (enought to hide it in the screen);

-servicestudio-overflow:initial;

>

        

    </div>


</div>


If i do this, I should be able to see the <absolute; right: -pixel (enought to hide it in the screen)> div to the Outsystems service studio preview but not on the BROWSER. 



Christian,

Could you explain what do you understand by 'service studio preview" and "browser" and "brrowser preview"?

Because you have the canvas where you edit the code, than you have the service studio preview, where you can see the web screen as it should appear in the browser (still from inside the service studio), than you can see the application in the browser in "normal" mode or simulating different devices.

How do you want to see your div in each one?

More, where are your div in the page? Inside what? which styles are being applied?

Could you provide a simple oml (module) that can reproduce your problem?

It's becoming difficult to help you because we are not being able to understand what really is your problem or what do you want to achieve.

Here is the sample oml.

Hi Christian,

Here is the sample.

kavita bagale wrote:

Hi Christian,

Here is the sample.

I don't think you understand my problem, anyway I already solved my problem. Thanks


Solution

I found a workaround to my problem.


I just used an if statement on extended property using style. If(False,"right:0px;","right: -321px;") so it'll be visible on the canvas but not on the browser preview

Solution

Christian,

Just as reference, I would like to say that you didn't stated your problem correctly.The fact you said you were using position: absolute, but was using in fact position: fixed, prevented anyone from giving you a correct answer. 

The position fixed will no long trigger the browser scroll when positioned off screen.

The theme has impact in the answers, because in the Dublin, as I told before, you have a "div" that is the content that has an overflow hidden, thus, not triggering the scrolls. But changing this would work only if position was absolute, as you told.
With position fixed, it no long trigger the browser scroll when positioned off screen, no matter what.

So, all our answers were missing the point.

In your case, better than use the "if" you used, would be to define a class with any stile that put the element visible, like change the right or setting the position to absolute instead of fixed (that would show to you the scroll bar):

.HiddenDiv
{
    position:fixed;
    right: -326px;
    -servicestudio-position: absolute;
}

.Content.ThemeGrid_Wrapper {
    -servicestudio-overflow-x: visible;
}

It is very important to give the correct information, in order to make it easy to us to help you.

Cheers,
Eduardo Jauch