Popup in reactive is not fully visible in Service Studio

Hi!

When I add and edit a popup in a page using Outsystems UI, the popup starts at around 45% from the top of the editor window and expands downwards as I add elements. Soon, I reach the end of the screen and have to start to add things blindly or using the widget tree.

As an example:

Here, I have added a dropzone, a list and I can't see my buttons. It is really annoying and I end up wrapping the whole content in a container that I edit on a blank page and then copy/paste back to the popup, hardly the optimal workflow.

Is there any way to reposition the popup edit canvas so that I can actually see what I am doing? 

Have you tried to adapt the preview in Service Studio? Try using -servicestudio-display: none while you need that element out for a minute, or adjust it height using -servicestudio-height. Got this tip on the link below.

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

Renato Nascimento wrote:

Have you tried to adapt the preview in Service Studio? Try using -servicestudio-display: none while you need that element out for a minute, or adjust it height using -servicestudio-height. Got this tip on the link below.

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

Thanks for your feedback Renato!

I know how to hide the popup when not working on it, there is an option for the with the widget itself. The issue is that the rendering in service studio does not allow me to scroll to the bottom of the element. To manipulate the CSS for service studio display is at best a workaround of what I would consider a bug in the UI component or the IDE. The workaround I have found which works best is to put the content of the popup in a container, move the container to the main page and set it up as I wish to have it and then move it back into the popup using the widget tree.


Hello,


Just bumping this discussion.

Having the same issue. Can't see the full popup and when scrolling, it scrolls the background as the popup remains static.

In my case the container cBt is not visible.

Bug or feature? :D


Hi,

this is not a perfect solution, don't know how to make it scroll with the scrollbar in service studio, but it shows a bit more.


.popup-dialog{
  -servicestudio-position: absolute;
  -servicestudio-top: -20px;
  -servicestudio-left: 25%;
}

.popup-scrolled-down{
    -servicestudio-top: -500px;
}


When I create a popup with 10 equally high containers, with normal service studio, I can only see 5 of them, testing in browser I can see 8, and with this solution I can see 7 with the top css.  So unless you are making popups that fill the whole viewport top to bottom, that should be enough most of the time.

For the really large popups, just add class popup-scrolled-down to the style classes of the popup widget, and you'll get a look at the bottom part.  Don't be alarmed, he doesn't show the popup background well in this scrolled down view, but you are able to edit and view the elements on it.  I'd advice to take the popup-scrolled-down class off after editing, your colleague might break a little sweat opening your screen after you.


Hope this helps,

Dorine


Mattias Rundberg wrote:

Hi!

When I add and edit a popup in a page using Outsystems UI, the popup starts at around 45% from the top of the editor window and expands downwards as I add elements. Soon, I reach the end of the screen and have to start to add things blindly or using the widget tree.

As an example:

Here, I have added a dropzone, a list and I can't see my buttons. It is really annoying and I end up wrapping the whole content in a container that I edit on a blank page and then copy/paste back to the popup, hardly the optimal workflow.

Is there any way to reposition the popup edit canvas so that I can actually see what I am doing? 

Hi Mattias,

I also had this problem. Found this post with the same question, but with a workaround to help solve the problem: https://www.outsystems.com/forums/discussion/55208/zoom-in-or-out-feature-on-interface-outsystems-service-studio-11/

It seems to be a bug but Dinis Carvalho managed to give a workaround, please check the solution on the post.

Eduardo Jauch also suggested another workaround: create the pop up content in a Block and then add an instance of that Block to the pop up, so it is easier to edit later on (might be easier than building the content on a container and then copy pasting it there).

Hope it helped someone who was searching for an answer to this question months later (like me),

Clarisse