Fixed Size Overlay in Coordinate Container

Ignition
,
1

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!

2

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 :blush:
Just learn css3 and you can do anything in perspective

1 Like
3

Or you could use a nested strategy.

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.

4

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
Maximized3825×1804 225 KB

and when the browser height is reduced…

Minimized
Minimized3821×901 121 KB

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.

5

As I told you use fixed mode for the root container and set width and height to 100%.

6

I must be misunderstanding your setup then - I’m seeing the same behavior for both solutions. My setup is:

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.

7

Try this:

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=<desired_size>, position.grow=0, position.shrink=0)
8

You might need a coordinate container in between the flex and the image so that you can control left/right positioning.

9

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

10

This did the trick, thank you.