# Fixed Size Overlay in Coordinate Container **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [June 29, 2020, 12:53pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154 "2020-06-29T12:53:06Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![m.boog](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@m.boog](https://forum.inductiveautomation.com/u/m.boog)\ **Post date:** [June 29, 2020, 12:53pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/1 "2020-06-29T12:53:06Z")
I am working in Perspective, version 8.0.12. I am adding a ‘Download Data’ image to all of the tables in my project, and the tables need to fill the space available within their container. I’d like to have the image overlay the table at the same location relative to the table, but maintain a fixed size - the page indicator on the table, for example, behaves this way. If I put the table and image in a coordinate container with mode ‘fixed’, I can maintain the fixed size of the image as the container changes size, but the table won’t fill the container. If I put the table and icon in a coordinate container with mode ‘percent’, the table and image position are correct, but my image grows/shrinks with the page and doesn’t look right. Is there a way to maintain the relative position of the image over the table, while keeping a fixed size? This functionality will also be useful in a visualization page I’m trying to build. Thanks! ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 29, 2020, 1:20pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/2 "2020-06-29T13:20:39Z")
Hi Use fixed mode and set your image position and then put your table under it and write 100% for both width and height of your table. It works 😊 Just learn css3 and you can do anything in perspective ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 29, 2020, 2:22pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/3 "2020-06-29T14:22:04Z")
Or you could use a nested strategy. ```auto Grandparent Coordinate Container (percent) L_ Table Parent Coordinate Container (percent) L_ Table (width=1.0, height=1.0) L_ Overlay Parent Coordinate Container (fixed) L_ Image ``` This would allow the Table to grow as the container grows, but your image will always remain the same size. Note that the positioning of the image should be handled by placing the `Overlay Parent Coordinate Container` in a certain position, and you should probably set `props.style.overflow` to a value of “hidden” for `Grandparent Coordinate Container`. ---
**Author:** ![m.boog](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@m.boog](https://forum.inductiveautomation.com/u/m.boog)\ **Post date:** [June 29, 2020, 4:52pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/4 "2020-06-29T16:52:47Z")
Thanks for the quick replies. I tried both of your approaches and successfully had the table fill the container, and had the image maintain its fixed size. The only remaining problem is that since the image is a fixed size, and the position of its top-left corner is based on a percentage, it starts ‘walking’ off the bottom of the page as the height of the browser is shortened. Notice the blue square at the bottom of the table when the browser is maximized… ![Maximized](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e7a98a36f6006b1574304d57342c5eca2ac264df.jpeg) and when the browser height is reduced… ![Minimized](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/a/ea9055982736b303867c0d158774797cf6ad3bff.jpeg) This is exactly what should happen, given the setup, but not usable for me because I have to support a variety of window sizes. Being able to set an offset on the Overlay container from the edge of the Table container would be great, but I don’t think that’s possible. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 29, 2020, 5:20pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/5 "2020-06-29T17:20:21Z")
As I told you use fixed mode for the root container and set width and height to 100%. ---
**Author:** ![m.boog](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@m.boog](https://forum.inductiveautomation.com/u/m.boog)\ **Post date:** [June 29, 2020, 5:58pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/6 "2020-06-29T17:58:57Z")
I must be misunderstanding your setup then - I’m seeing the same behavior for both solutions. My setup is: ```auto Root Coordinate Container: (Mode: Fixed) L_ Table (x:0, y:0, width: 100%, height: 100%) L_ Image (x:60%, y:96%, width: 25, height: 25) ``` When the height of the browser is reduced, the control is pushed off the bottom edge of the page. This would work if I put the control in the upper edge of the browser window, but not the lower. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 29, 2020, 6:47pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/7 "2020-06-29T18:47:24Z")
Try this: ```auto Grandparent Coordinate Container (percent) L_ Table Parent Coordinate Container (percent) L_ Table (width=1.0, height=1.0) L_ Overlay Parent Flex Container (direction=column-reverse) L_ Image (position.basis=, position.grow=0, position.shrink=0) ``` ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 29, 2020, 6:48pm UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/8 "2020-06-29T18:48:19Z")
You might need a coordinate container in between the flex and the image so that you can control left/right positioning. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 30, 2020, 5:54am UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/9 "2020-06-30T05:54:27Z")
Root Coordinate Container: (Mode: Fixed) L\_ Table (x:0, y:0, width: 100%, height: 100%) L\_ Image (x:10, y:10, width: 25, height: 25) You must use fix number for image x and y for top left corner. if you want to fix your image on other side use this: position: absolute bottom: 0px right: 0px ---
**Author:** ![m.boog](https://avatars.discourse-cdn.com/v4/letter/m/f6c823/32.png) [@m.boog](https://forum.inductiveautomation.com/u/m.boog)\ **Post date:** [July 2, 2020, 1:39am UTC](https://forum.inductiveautomation.com/t/fixed-size-overlay-in-coordinate-container/36154/10 "2020-07-02T01:39:16Z")
This did the trick, thank you.