"PositionType": "Absolute" doesn't work

[brianchu]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest Beagle release to make sure your issue has not already been fixed: https://github.com/ZupIT/beagle/releases

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Use this following code (This is actually image.json example from the playground with extra lines)

   {
   "_beagleComponent_": "beagle:container",
   "style": {
   "flex": {
     "PositionType": "Absolute",
     "flexWrap": "NO_WRAP"
   }
   },
   "children": [
   {
     "_beagleComponent_": "beagle:image",
     "path": {
       "_beagleImagePath_": "local",
       "url": "public/web-illustration.png",
       "mobileId": "mobileIllustration"
     },
     "style": {
       "size": {
         "width": {
           "value": 370,
           "type": "REAL"
         },
         "height": {
           "value": 182,
           "type": "REAL"
         }
       },
       "margin": {
         "vertical": {
           "value": 0,
           "type": "REAL"
         }
       }
     }
   },
   {
     "_beagleComponent_": "beagle:text",
     "text": "Beagle Remote Image",
     "alignment": "CENTER",
     "styleId": "title",
     "textColor": "#001B26"
   },
   {
     "_beagleComponent_": "beagle:image",
     "path": {
       "_beagleImagePath_": "remote",
       "url": "https://i.ibb.co/rvRN9kv/logo.png"
     },
     "style": {
       "size": {
         "width": {
           "value": 370,
           "type": "REAL"
         },
         "height": {
           "value": 182,
           "type": "REAL"
         }
       },
       "margin": {
         "top": {
           "value": 0,
           "type": "REAL"
         }
       }
     }
   }
   ]
   }

Observed: The two image does NOT overlap in Android runtime Android:

Web:

Justification: Need Absolute to work so we can create overlap layout in many cases (e.g. background image with scrolling in the front).

Expected Results

Describe what you expected to happen.

Code example, screenshot, or link to a repository:

Please provide a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[Tiagoperes]

Hello @brianchu.

The current behavior is expected. The only problem in the example is how the "cover" as the image mode differs from web platforms to mobile. This is something we're aware of and intend to fix.

There are 3 problems preventing you from placing an image on top of another:

1. With the exception of component names and action names, Beagle is case-sensitive. The correct value would be "ABSOLUTE" and not "Absolute". The correct key would be "positionType" and not "PositionType"
2. positionType is a property of style and not style.flex.
3. The elements that will be positioned in the Z-Axis should receive positionType: "ABSOLUTE", not their parent.

Here's and example: https://playground.usebeagle.io/#/cloud/S3-cd07cb6d-56d6-43ba-825c-8ff5e0bc7493/main.json?platform=react-web

Please, let me know if I can close this issue.

[brianchu]

Thanks! It works now. Waiting to see the solution of web vs mobile platform in the future.