Proto.io automated functionality - Make scrollable container

Make scrollable container

With this tool you can automatically make your UI item or selection of UI items, or group a scrollable container. It is available from the top toolbar. As soon as you click on ‘Scroll’, you will notice that the word ‘Container’ is appended to your component’s or group’s name and the Containers properties inspector opens up. Here you can change scroll properties. You can also set the initial scroll position (in pixels). Since you converted to a container, you will see it in the Layers list and in the Containers list (see relevant article on Containers).

 

If the UI item you convert is greater than the screen size in height, then its scroll property is "Vertically". If it's greater in width, then it's scrollable vertically and if it's greater both in height and in width, then it becomes scrollable omni-directionally.

If your UI item is smaller than the screen (both is height and in width) then the container created has an extra 200 pixels with a placeholder there to indicate that you can add your scrollable content there. If you want to change the size of the container, just edit the Container Properties or click on its name on the canvas and the blue resize handles will appear.

 

Have more questions? Submit a request