Perspective: Design help - add coloured rectangle behind graphic stretching width

I’m still fairly new to Perspective, and always seem to find myself scratching my head working out how to do the simplest of things… This is one of them.

I would like to do something like below screenshots from inkscape. I’d like a group of objects on top with a graphic and a title which will always remain in the centre of the page, no stretching. Then behind it, I want a rectangle to stretch the entire width of the page, at any page width.

I have no idea how to do this… I don’t know how to get the rectangle to sit behind the graphic/text and also have it stretch without affecting the graphic/text. There’s not really a z-order in Perspective like in Vision and I’m struggling!


You should be able to use z-indexes to get your layering right.

Then if you set the width of the rectangle to 100% it should do what you want it to do.

1 Like

Containers in Containers in Containers.

In a View built on a Coordinate Container set to use “fixed” mode, position the circles and titles.

In a different View built on a Coordinate Container set to use “percent” mode, place your rectangle (using 1.0 for the width)

Now place an Embedded View and supply the path of the View which has the titles/shapes, and position it where you need it.

1 Like

An important thing that newer users to Perspective often don’t immediately grasp - there’s nothing conceptually “special” about containers the way there is about windows in Vision. That is - there’s not some large performance penalty for having additional views, and you can arbitrarily nest containers on the same view - if you look in the component palette, you’ll see the exact same container types that you get in the ‘Create New View’ dialog. These can be arbitrarily nested on the root container - just double click into them to ‘deep select’, and your editing experience will change to the requisite container type.

So you could also do everything Cody suggests inside one single “Header” view, which is then what you put into an embedded view on other pages.

… In Containers.


This attachment is a quick pass at constructing your “header”. Some quick tweaks would allow for parameterization. (11.6 KB)

Thanks for the replies, and @cmallonee thanks for the example project, makes sense! Note I increased the width of the Logo view so that it didn’t cut it off at phone-widths.

Next question regarding your example: if I wanted the “Logo” view to always be say 30px from the left of the page and not move when resizing, how would I do that? I could change the root coordinate container to fixed mode and set the Logo view’s x-coordinate to 30px, but then the rectangle wouldn’t stretch.

Set The Embedded View to have an x position of 0.0.
In the “Titles” View, move everything to the right by 30px.

The “Logo” View should now have the “logo” starting at 30px from the left, and the rectangle has been untouched. (11.7 KB)

Ok my bad, that was too easy.
Last (dumb :sweat_smile:) question: What about centring the Logo (EDIT: I meant Titles) view within the view, regardless of width?

… In containers.

Place a FLEX container into your Logo View, and set the x value to be 0.0, and width to be 1.0.
Set the height of the Flex Container to be the same as the “Titles” View.
Place an Embedded View into the Flex Container.
Set the path of the Embedded View to be that of the “Titles” View.
Set FlexContainer.props.direction to be “column”.
Set `FlexContainer.props.alignItems1 to “center”.

Bam. (11.9 KB)

Ah, just the titles would mean you’d want them in their OWN View, which you then Embed. So… Containers.

And again, too easy! (when you know what you’re doing, haha)

Thanks for your help. It all seems a bit foreign to me at the moment, but it was the same when I first started using Ignition a couple of years ago with Vision (this was a lot more natural though coming from experience in coordinate-based design; anchored layouts for Vision were my learning curve). I’m sure once you grasp the understanding, everything just sort of flows (or is contained :wink: )!