Scroll in screen in designer of mobile app

Maybe a stupid question but I can't seem to figure it out. How do you scroll inside your mobile screen if you are in designer mode? Regular scrolling or clicking the scrollbar does not seem to work. Sorry if there is a simple solution and I overlooked :)

Sven V wrote:

Maybe a stupid question but I can't seem to figure it out. How do you scroll inside your mobile screen if you are in designer mode? Regular scrolling or clicking the scrollbar does not seem to work. Sorry if there is a simple solution and I overlooked :)


Hey Sven,


If this scroll is coming from my given styles I usually use the below solution.

SyntaxEditor Code Snippet

.scroll-ss{
height:100px; 
overflow:auto;
-servicestudio-overflow: inherit;
-servicestudio-height: 100%;

}


Regards,

Pankaj 

Pankaj pant wrote:

Sven V wrote:

Maybe a stupid question but I can't seem to figure it out. How do you scroll inside your mobile screen if you are in designer mode? Regular scrolling or clicking the scrollbar does not seem to work. Sorry if there is a simple solution and I overlooked :)


Hey Sven,


If this scroll is coming from my given styles I usually use the below solution.

SyntaxEditor Code Snippet

.scroll-ss{
height:100px; 
overflow:auto;
-servicestudio-overflow: inherit;
-servicestudio-height: 100%;

}


Regards,

Pankaj 

Do I really need to add CSS to make scrolling available in design mode? (dragging and dropping components on the mobile screen canvas) 

That looks really weird, but gave it a try anyway and I still can't scroll :(


Hi Sven V,

If you are not able to do with CSS you can try by logic like this,

 Secondly, you can use a horizontal scroll bar 

Hope this will help you.


Regards,

Amreen

Maybe I am not making myself clear enough. Maybe because it sounds so stupid. I dragged components on my screen and I can't see them in the designer of Outsystems. Do I really need to do the above?? Please see my screenshot


https://i.imgur.com/frLHsoY.png

Hi Sven,

Don't feel bad for asking questions but make sure what you want as a result or output? What is your requirement for the screen.? Please elaborate it.


Regards,

Amreen

Amreen Shaikh wrote:

Hi Sven,

Don't feel bad for asking questions but make sure what you want as a result or output? What is your requirment for the screen.? Please elaborate it.


Regards,

Amreen

I'm not sure how I can make it more clear. You see there is a mobile screen. I dragged components from the toolbox on there. I want to scroll through the screen to see what I dragged on there in DESIGN mode. 


Sven V wrote:

Amreen Shaikh wrote:

Hi Sven,

Don't feel bad for asking questions but make sure what you want as a result or output? What is your requirment for the screen.? Please elaborate it.


Regards,

Amreen

I'm not sure how I can make it more clear. You see there is a mobile screen. I dragged components from the toolbox on there. I want to scroll through the screen to see what I dragged on there in DESIGN mode. 




1. Shows widget tree, so that you can get which component or widget you have dragged and drop.

2.On click of that component you can see it.


Hope this helps you.

Cheers

Hi Sven,


I don't know how you drag those wedget because I never get scroll just by dragging and dropping.

here is an option called display mode.  On click of these dot's, you can make theme show/hide.



If possible can you please share your OML file?

so that we can look into that and try to solve your problem.

Regards,

Pankaj

Hi Sven,

As you can see on Amreen Shaikh's first post, there should be a flat scrollbar to the right of your canvas (immediately to the left of your Widget Tree/Properties area, that would allow you to scroll up and down so you can see everything on the screen you're designing.

On your image I see a standard windows scroll bar on the canvas itself, which I find peculiar... does that one allow you to scroll up and down? Did you add any specific CSS to show it?

What versions of the OutSystems and Silk/OutSystems UI Mobile are you using?


Amreen Shaikh wrote:

Sven V wrote:

Amreen Shaikh wrote:

Hi Sven,

Don't feel bad for asking questions but make sure what you want as a result or output? What is your requirment for the screen.? Please elaborate it.


Regards,

Amreen

I'm not sure how I can make it more clear. You see there is a mobile screen. I dragged components from the toolbox on there. I want to scroll through the screen to see what I dragged on there in DESIGN mode. 




1. Shows widget tree, so that you can get which component or widget you have dragged and drop.

2.On click of that component you can see it.


Hope this helps you.

Cheers

That does not seem to center the widget. Clicking it also doesn't center it.


https://i.imgur.com/5ABrqQn.png


Hi Sven,


1.Go to brush icon.

2.Align center 


Regards,

Amreen

Jorge Martins wrote:

Hi Sven,

As you can see on Amreen Shaikh's first post, there should be a flat scrollbar to the right of your canvas (immediately to the left of your Widget Tree/Properties area, that would allow you to scroll up and down so you can see everything on the screen you're designing.

On your image I see a standard windows scroll bar on the canvas itself, which I find peculiar... does that one allow you to scroll up and down? Did you add any specific CSS to show it?

What versions of the OutSystems and Silk/OutSystems UI Mobile are you using?



I have the feeling you are the only one who actually understands what my problem is.

The vertical scrollbar is there because there are lots of widgets on the screen. That doesn't allow me to scroll. In the widget tree I see what is on the screen but I want to see it visually.

I have version 11.0.208.0. 

Don't know why this is so difficult!!

Hi Sven,

I have the feeling you are the only one who actually understands what my problem is.

Yup, I believe I understand your problem... not sure I can help you out though.

The vertical scrollbar is there because there are lots of widgets on the screen. That doesn't allow me to scroll. In the widget tree I see what is on the screen but I want to see it visually.

That vertical scrollbar shouldn't show up... you should have another one always on screen (although it doesn't always look like one) to the right of your canvas, next to the right-hand sidebar (Widget Tree & Properties panels).

I have version 11.0.208.0. 

You may consider update to a later version of Service Studio, if that's an option for you. Always helps in squashing a few more bugs...

Don't know why this is so difficult!!

It shouldn't be any difficult, the scrollbar should just show up an also just using your mouse wheel to scroll (or whatever standard scrolling mechanism you have setup should work without any extra configuration or issues.

Can you upload your module, so we can take a look and see if we can reproduce the behaviour you are seing? In any case, I've signalled your problem to OutSystems, if it is a previously undetected issue they will definitely want to know about it.

Hey Sven V,

That shouldn't happen (you shouldn't need extra css to make the scroll work) and it is either a platform bug or some CSS you have in your application that is compromising the scroll inside the editor.

As you can see here is a simple mobile screen with the scroll working properly.

Can you please try to understand if some custom css is interfering with the scroll? Consider removing peaces of css code and understand if that solves the problem.

If you want, send me your module (in private) and I can try to understand what is happenning.

Hope this helps,

Cheers!

At page 8 you have this step for the container. But instead of the '45px' height, change it to 'Auto'. That fixed the problem for me. 

Hey Sven,

Were you able to solve your problem?

If not consider sending me your module so that I can help you out!

Cheers,