Hello @Arthur Haine 

Thanks for bringing this to us and to gather all the info you provided.

This seems a side effect of a change we had to do in order to improve the SS preview in the new IDE.
Here's the task code that will be in the release notes ROU-3187, but we'll try to provide if possible a workaround later this week.

Kind Regards,
GM

Hi Arthur,

Could you confirm if you have the .hide-on-service-studio class on your base theme with this rules?

.hide-on-service-studio {
     display: none;
     -servicestudio-display: none;
     -servicestudio-width: 0px;
    -servicestudio-height: 0px;

}

If not, please add it and check if its fixed?

Thanks
Bruno Marcelino

Hi Brunu,

Thanks for your answer. We do have the above CSS as part of the base theme.

I do see that the class 'hide-on-service-studio' does not appear on the specified DIV in the front end. I think that is due to the EXTENDED property class that is empty and overrides the style classes set. Could that be the issue?

Arthur Haine

Yes Arthur, when the class in Attributes is "" it overwrites completly the style class defined before.

Hi Carlos,

From the CSS fix provided by Bruno I had the impression the CSS should fix the issue (because of the display:none).

What I pointed out is that even though the CSS is present in the Theme, the class name is NOT set on the container that is causing the shift in the layout due to the class="".

So my question to OutSystems is:
- Is it expected to see the class 'hide-on-service-studio' on the container in the front end? Because then the theme needs to be fixed.

Kind regards,

Arthur Haine

I have added a class called hidden just as a plan B, so yes if you want to hide the Widgets in the ServiceStudio we need wrap with a container and with the class Bruno gave instead the empty one and the Theme sure needs to be fixed with it.

Hi @Arthur Haine ,

To fix your issue on application, here is a workaround that doesn't need to clone the OutSystemsUIWeb:

.aspNetHidden + .OSInline,
.OSInline {
display: block;
}

The space is created due the class OSInline on top of the layout that contains a block LayoutWidgets. If you will clone the OutSystemsUIWeb, just need to set the with to Fill:

On our next release, this will be fixed by default. Please set the changes and check if is everything fixed.

Thanks
Bruno Marcelino

Hi Bruno,

Thanks for the quick response.

This workaround seems to work. I will double check if there are side effects as it targets all elements with OSInline but I think it is ok.

Will let you know tomorrow.

Kind regards,

Arthur Haine

Hi Bruno,

The CSS provided was a bit too broad because it interfered with all OSInline classes in the site.
I have tried to narrow in down to this which will address only the elements with .OSInline on the first level (which is the one causing the whitespace).

For us this seems as a workable workaround.

Kind regards,

Arthur Haine

form#WebForm1 > .OSInline{
    display: block;
}

hi @Arthur Haine 

Yes, it's possible that have side effects.

For your use case, your suggestion is the best approach.

Thanks

Hi OutSystems,

I noticed another related issue: In the theme we now have the class

.hide-on-service-studio {
    display: none;
    -servicestudio-display: none;
    -servicestudio-width: 0px;
    -servicestudio-height: 0px;
}

I think the bold part is not correct. This will hide the elements with this class not only on ServiceStudio but always.

Looking at the usage of this class in the theme I notice that this affects the time picker control as the dropdown has that class applied:

So either the display:none is wrong, or the class should not be applied to the dropdown.

Can you advise me on this?

For now I think I can do a workaround with: display:unset; in our own theme.

I think you can remove the display none from the class .hide-on-service-studio { } since we already have the service studio prefixs in place.

If you can provide a teste URL just to double check, it would be better but i would remove the display none instead adding the display unset

Hi Carlos,

I agree removing the display: none; is better but it part of the Base Theme (OutSystemsUIWeb) and not our own theme so I cannot remove it.

The unset is just a temporary override.

Hi @Arthur Haine 

Have you tried the latest version (1.9.2) of OutSystems UI Web where this should be already fixed?
If so, and if all is good now, I would suggest marking this as solved so that other community members with the same questions, can easily find this post.
Thanks again for reaching out.

Cheers,
GM

Hi Gonçalo,

Version 1.9.2 has been installed when in was release and it did indeed solve the issue so I will mark it as solved.
Thanks for the effort and quick responses!

Arthur Haine