ZupIT/beagle

make beagle:container fit to content width

Closed this issue · 1 comments

iSallyAbdallah commented

Use case

i have container which have image and two text in row and need container width fit content
How can I manage it ?

Example

{ "_beagleComponent_": "beagle:container", "style": { "backgroundColor": "#154599" }, "children": [ { "_beagleComponent_": "beagle:container", "style": { "backgroundColor": "#2C57A3", "positionType": "RELATIVE", "size": { "height": { "value": 80, "type": "REAL" } }, "margin": { "all": { "value": 30, "type": "REAL" } }, "cornerRadius": { "radius": 30 }, "flex": { "flexDirection": "ROW", "justifyContent": "SPACE_EVENLY", "alignItems": "CENTER" } }, "children": [ { "_beagleComponent_": "beagle:image", "path": { "_beagleImagePath_": "local", "mobileId": "ic_skycode_@{observations.iconCode}" } }, { "_beagleComponent_": "beagle:text", "text": "@{observations.temperature}°", "styleId": "mediumText" }, { "_beagleComponent_": "beagle:text", "text": "@{observations.location}°", "styleId": "mediumText" } ] } ], "context": { "id": "observations", "value": { "temperature": "60", "location": "Portland , OR", "iconCode": "12" } } }

Tiagoperes commented

Hello @iSallyAbdallah!

To make a container not grow and, instead, adapt to its children, we must set "grow" to 0. This is a behavior of the Flex Layout (Yoga), which Beagle uses under the hood.

This playground on the Yoga website can help you understand the layout system better: https://yogalayout.com/

Here's a modified version of your example where the inner container doesn't grow: https://playground.usebeagle.io/#/cloud/S3-957ec329-b14e-454d-9285-24357cc4f77f?platform=react-web.

  • 👍1