Overflow

Overview

Overflow is a CSS property which sets what to do when an element's content is too big to fit in its block formatting context.

Overflow can be set on the x or y axis of the block.

By the panel you can easily specify if the overflowing parts of an element should be visible, hidden or if the element should scroll.

More about the overflow CSS property - Here.

Oveflow options

Overflow options are located in the Properties tab.

1. Overflow

   • Drop down menu where you can set the overflow property - visible, hidden, scroll or auto.

2. Split Overflow

   • When the button is checked you can control horizontal and vertical overflow separately via the Overflow-x and Overflow-y dropdowns.
   • If Split Overflow is not checked then overflow will work for both x and y axis.

Example

Create a scrollable content using dynamically generated items

1. Add a content wrapper

   • The area where the elements will be generated dynamicaly.
   • Create a symbol with the scene dimensions and add an instance name "wrapper".
   • Then edit the "wrapper"'s instance by double clicking on it.

2. Create the element which will be dynamicaly generated by the engine.

   • In the example is created the gun sight in the image below".

   • Add an instance name to the element - element.

   • Navigate to the Data-binding tab.

   • Add a bind-for attribute to the "element" with the value index, iter:{{model.arrayOfItems}}.

   • Navigate to the Properties tab.

   • Set the position of the element to Relative.

   • To set index of the "element" enter in its timeline and select the 999 text

   • Add a bind-value attribute to the text with the value {{index}}.

   • Return back to the scene's timeline.

3. Make the wapper scrollable.

   • Select the "wrapper" element and navigate to the Properties tab.
   • Check the flexbox checkbox and set the:
     • Flex wrap to wrap
     • Align content to flex-start
   • Set the overflow to scroll.

4. Define the Model

   • Navigate to the Document tab.
   • Add a Load event with a Javascipt handler.

   • Open the JS editor and enter the following lines of code.

     const modelData = {
         arrayOfItems: []
     };
     
     for (let i = 0; i < 40; i++) {
         modelData.arrayOfItems.push('');
     }
     
     engine.createJSModel('model', modelData);
     engine.synchronizeModels();
     

   • This model will generate dynamicaly 40 elements in "wrapper".

5. Run the Player and check the result.