Flex Container & Embedded Views

I’m currently using embedded views to bring the same exact view to different pages within my perspective project. However, I am having a hard time changing the size of them properly and the components within them lining up correctly on different pages. Is it possible to use a Flex Container with an Embedded View in fixed mode and scale the embedded view within it following the rules of the flex container?

Hi @jwilliams, would you be able to provide screenshots of exactly what you need?

It should be possible using the different types of views/containers, but it’s difficult to advise which combination would be best without context :slight_smile:

image
Above I have a Flex Container with an Embedded View within it. The Embedded View is set to fixed as I need all the components within it to adjust at the same rate.
However as you can see below when I adjust the Flex Container, it doesnt resize the embedded view within it. Note that changing the overflow from auto to any of the other options does not result in the view scaling down as you would expect in a Flex Container. I also have to use the embedded view as the components within it have tags that allow the different lines to change colors for different states.
image

Is this:

  1. The view contained within the embedded view component is a coordinate container set to fixed mode?

OR

  1. The embedded view component has been set so that the grow/shrink values are 0?

A different point of view, if you are using this as a pipe animation you may find using a background SVG and overlaying components on it better for performance etc. I haven’t had to do this personally, but this thread details it: Project screenshots - share yours - #122 by nminchin

The view contained within the embedded view is a coordinate container set to fixed mode.

If this is set to fixed mode the view will never resize. You will need to change it to percent mode and ensure that the aspect ratio settings etc. are correct for your requirements.

1 Like

For pipework e.g. P&IDs, I use blank-text labels with borders set for my pipes, either single edges or 2 perpendicular edges. At least for now anyway while we don’t have piping tools.
While you can use percent mode in a coordinate container to have your graphic resize, I’ve found that it’s far more painful than it’s worth:

  • all size and positions will then be in percent (0-1.0) which makes it incredibly difficult to work with
  • getting text to resize properly is a real pita (pain in the arse)!

But if you need it, make sure to set your aspect ratio to the expression:

{this.view.props.defaultSize.width} + ':' +
{this.view.props.defaultSize.height}

as Matt alluded to in order to maintain your aspect ratio and not have components resize disproportionately. The above is from memory, so might be slightly different… Might need to remove ‘.view’

1 Like