# What is the 'correct' way to build P&ID/Overviews with coordinate containers?

**URL:** <https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903>\
**Category:** Ignition\
**Created:** [December 18, 2025, 8:12pm UTC](https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903 "2025-12-18T20:12:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baxter](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@Baxter](https://forum.inductiveautomation.com/u/Baxter)\
**Post date:** [December 18, 2025, 8:12pm UTC](https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903/1 "2025-12-18T20:12:08Z")

</div>

Firstly, I am working with Version: **8.1.39**

This has been driving me mad for some time now and I feel like I am missing something simple. I want to create, for example, a P&ID screen that will scale on screen sizes across all 16:9 desktops.

I am working with the follwing structure:

Flex Column (root)

- Tab Container
  - Flex Column
    - Coordinate (percent)
      - Embedded View (Coordinate (percent))
      - Embedded View (Coordinate (percent))
      - …

I wrapped my Tab and Coordinate containers in Flex containers to try and give me more control over the display, to no avail. Each embedded view is made up of symbols and further embedded views as templates, which are created using Flex Containers.

I have tried the following styling and variations thereof across multiple containers and still end up with component misalignment within embedded views, overflow; and when hidden, clips content off the side of the screen on smaller resolution displays:

```python
{
  "classes": "",
  "boxSizing": "border-box",
  "overflow": "hidden",
  "height": "100vh",
  "margin": 0,
  "padding": 0,
  "width": "100vw",
  "minHeight": 0,
  "minWidth": 0
}

```

I really do struggle with the graphical aspect of Ignition Perspective - coming into this with no prior experience with containers, web development, etc. Are there any resources out there that anyone can recommend for working with different container types and how they interact with CSS? I want my views to be dynamic and useable across all devices. I know that Breakpoint containers can help with this, but it doesn’t feel like the right approach when styling can surely give you completely responsive views?

---

<div class="post-metadata">

**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\
**Post date:** [December 18, 2025, 8:24pm UTC](https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903/2 "2025-12-18T20:24:46Z")

</div>

Start with drawing out what you want the view to look like. Then we can help you figure out a container arrangement.

---

<div class="post-metadata">

**Author:** ![Baxter](https://avatars.discourse-cdn.com/v4/letter/b/b2d939/32.png) [@Baxter](https://forum.inductiveautomation.com/u/Baxter)\
**Post date:** [December 18, 2025, 10:39pm UTC](https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903/3 "2025-12-18T22:39:57Z")

</div>

That sounds like a good approach, I'll get back to you tomorrow with a wireframe.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 18, 2025, 11:35pm UTC](https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903/4 "2025-12-18T23:35:57Z")

</div>

Misalignment when using percent mode is almost always is a result of your aspect ratio settings being wrong.

As a rule of thumb:

- set the main coord View to `percent` mode and `aspectRatio: view.props.defaultSize.width} + ':' + {view.props.defaultSize.height}`
- set all other embedding views to `percent` mode and blank `aspectRatio`

---

<div class="post-metadata">

**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\
**Post date:** [December 20, 2025, 4:01pm UTC](https://forum.inductiveautomation.com/t/what-is-the-correct-way-to-build-p-id-overviews-with-coordinate-containers/112903/5 "2025-12-20T16:01:03Z")

</div>

In a recent project at a gas plant, we nested a coordinate container under layers of flex containers (to control the minimum and maximum ‘zoom’ levels). We built a template which had the base container setup required for uniform scaling across all pages.  
Hindsight - I wish we would have spent the time to develop an advanced style sheet to perform min - max scaling based on client view width…and intend to include this development during our transition to 8.3 in 2026.