I'm having problems setting margin-left in Style Properties in Service Studio.

When I try to use margin-left: var(--space-m), the rule is completely ignored.

It works fine if I hard-code a value, for example margin-left: 20px;

Is there a good work-around for this, other than creating a css class?

Thank you.

Actual Platform Version: 11.7.3.7036 Internal Version

Actual Development Environment Version: 11.7.1.15066

Let me quickly add that I'm using Traditional Web.

Hi Brynleif Andreasen ,

Can you share image of element where and how to use this css.

you can use.

.ClassName{

margin-left: 20px !important;

}


Regards

Rahul Sahu

Thanks for the reply Rahul Sahu! Certainly your solution will work, but I was looking for an even easier way to do it.

I can show you images of what I mean.

I set this CSS on a container: margin-top: var(--space-m) and margin-left: var(--space-m)


This is what the selected container looks like in Service Studio:


You can see that only the top margin is visible, and it is the same when I publish the page:


Can you see? margin-left is simply not in the page.

Do you know why this is happening?



Solution

Hi Brynleif Andreasen

i tried this css and get same result and after finding some research i got it why this happen,

1.when use this css on container  there is no space for left so it will only take margin-top property.

2 when  use this css inside container  text, it will not take Margin-top property because there is no top space.

3. when use css inside container  text than you will see it will auto adjust css like 

if you put 

          margin-top: var(--space-m);

          margin-left: var(--space-m);

than click outside it will auto adjust and you will see in css property

 margin-left: var(--space-m);   

 margin-top: var(--space-m);


More info related this type css-

https://basscss.com/v7/docs/white-space/



Hope this will help you.

Regards

Rahul Sahu

Solution

Rahul Sahu wrote:

Hi Brynleif Andreasen

i tried this css and get same result and after finding some research i got it why this happen,

1.when use this css on container  there is no space for left so it will only take margin-top property.

2 when  use this css inside container  text, it will not take Margin-top property because there is no top space.

3. when use css inside container  text than you will see it will auto adjust css like 

if you put 

          margin-top: var(--space-m);

          margin-left: var(--space-m);

than click outside it will auto adjust and you will see in css property

 margin-left: var(--space-m);   

 margin-top: var(--space-m);


More info related this type css-

https://basscss.com/v7/docs/white-space/



Hope this will help you.

Regards

Rahul Sahu

 

Thank you for the reply! This answers my question, so I will mark it as a solution.

However, I am still wondering why OutSystems has this behavior when I am using css variables and not when I am using hard coded values.

Hi Brynleif Andreasen ,  

I am also wondering for this weird bevaviour . i will find something on this and let you know .


Regards

Rahul Sahu