# How make view fill container on perspective **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [November 15, 2023, 7:01pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946 "2023-11-15T19:01:34Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![marco\_alvarez](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@marco\_alvarez](https://forum.inductiveautomation.com/u/marco_alvarez)\ **Post date:** [November 15, 2023, 7:01pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/1 "2023-11-15T19:01:34Z")
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. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [November 15, 2023, 7:06pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/2 "2023-11-15T19:06:34Z")
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. ---
**Author:** ![marco\_alvarez](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@marco\_alvarez](https://forum.inductiveautomation.com/u/marco_alvarez)\ **Post date:** [November 16, 2023, 1:52pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/3 "2023-11-16T13:52:09Z")
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 ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [November 16, 2023, 1:54pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/4 "2023-11-16T13:54:14Z")
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. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [November 16, 2023, 2:32pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/5 "2023-11-16T14:32:25Z")
I can see 2 cases: 1. the embedded view is not growing to fill the flex container 2. 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`: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/09fdf1ed967f795a6831e6cb6111fc4e5ea72c22.png) 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 : ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1c73d2345cce38f9c936e78942540961058745c7.png) ) Do the same thing with the `alignItems` property (you can use this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/d/7df50ffd0403caf761a646896b4a9918fdbf6060.png) ) 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`. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/6704c8194db9a297c110e33272141e24d0b0a012.png) 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: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/a/7a06c5c131b735b89c83d14908f2b71294bfdbe2.png) 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. ---
**Author:** ![marco\_alvarez](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@marco\_alvarez](https://forum.inductiveautomation.com/u/marco_alvarez)\ **Post date:** [November 16, 2023, 2:44pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/6 "2023-11-16T14:44:02Z")
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 . ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/632913b30f7923f9dedd72e61aeb0b562cf68797.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [November 16, 2023, 3:10pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/7 "2023-11-16T15:10:20Z")
Refer to the post above, which I finished editing after you replied. ---
**Author:** ![marco\_alvarez](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@marco\_alvarez](https://forum.inductiveautomation.com/u/marco_alvarez)\ **Post date:** [November 16, 2023, 3:26pm UTC](https://forum.inductiveautomation.com/t/how-make-view-fill-container-on-perspective/81946/8 "2023-11-16T15:26:54Z")
> [@pascal.fragnoud](#): > > ll, so that it Thanks for you answer, I had not notice that when you deep select you get access to ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f18ecc40bf081fa3e3d14c2718b5e426b2181a81.png) Perspective is so text/script based that I forgot that you can use the buttons to configurate the FlexRepeater container. Its solved!