Hi, I have an embedded inside a flex container, the problem I have is that the embedded view is always in the center of the flex container and dont grow with the width of the page, this mean that is the width of the flex container(webpage) increase, the view just stay in the center on his original size. I want the view to use all the available with of the flex container and grow with his width.
We need more information. Is the embedded view a flex container or something else?
When debugging problems with views and containers it can be very helpful to add a border to the views and components.
- Create a new style class.
- Set the border to solid and a pretty color.
- Set the margin and padding to something like 5 - 8.
- Apply the class to each component and view and you'll be able to start tracking down the problem.
I did that but I dont know that property to add or change. The embedded view dont fill the space of his container. The margins look fine, the flex container space grow but the embedded view not. Where should I change something, on the embedded view? in the view in the root or inside the root
We need a nicely cropped screengrab and a copy of the view. (Right-click in the project browser and paste it in here using the </> formatting button.
I can see 2 cases:
- the embedded view is not growing to fill the flex container
- the contents of the embedded view don't grow inside the view itself
What to do depends on which of the above cases you find yourself in.
Give me 5 minutes and I'll come back to edit this post with examples.
Let me introduce embedded_view:
It's a "column flex view" (its root container is a flex container), of 300px by 300px, and its root container has a background-color: yellow style. Its justify and alignItems properties are set to center.
It contains a single label, which background is set to red, with min-width: 150px, basis: 150px and grow: 0.
So, it's a 15 by 150 red square in the center of a 300 by 300 yellow square.
Now let's play with the different properties.
First, change justify to whatever you want and see how the red square moves
(you can use this : 
)
Do the same thing with the alignItems property
(you can use this: 
)
Now change grow to 1, and play with alignItems some more.
You'll notice that with grow: 1 and alignItems: stretch, the red square expands to take all the available space.
Alright, now we have a view entirely filled with its content.
Let's move on, here's main_view.
It's a 450 by 450px square, with blue background and only one component inside: embedded_view.
main_view is also a flex column view, and for now it's configured with justify: center and alignItems: center.
The embedded view inside is configured with useDefaultViewWidth: true, useDefaultViewHeight: true, grow: 0 and basis: auto.
Play with the root container's flex properties to see that the square will move around just like before, and that grow: 1 will allow the square to grow past its basis.
When you're done, put everything back the way it was, uncheck useDefaultViewWidth and useDefaultViewHeight then do it all over again.
It's not always super intuitive, so actually playing with those properties, trying different combinations, is a necessary first step to get a feel of what does what. So play with them some more.
Now, for flex repeaters, since apparently it's what you really want: It works just the same.
Watch out for these 2:
In your screenshot, I can see they're both the to true. Which means the instances will stick to the sizes configured in the repeated view.
You'll need to uncheck them to be able to make their size IN THE REPEATER flexible.
And you'll need to configure the repeated view properly as well, so that it plays nice with whatever is embedding it.
4 Likes
I created a flex container and put the view inside and work properly, I think there is a problem with the flex repeater(I need to use this container type) Im using, here is the config .
Refer to the post above, which I finished editing after you replied.
Thanks for you answer, I had not notice that when you deep select you get access to
Perspective is so text/script based that I forgot that you can use the buttons to configurate the FlexRepeater container. Its solved!
1 Like