# Template Canvas Layout Constraints

**URL:** <https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [February 23, 2024, 7:57pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287 "2024-02-23T19:57:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2024, 7:57pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/1 "2024-02-23T19:57:40Z")

</div>

Are there directions for how to use this property? The default is `ins 0, fill` - whatever that means.

I would like to be able to set up the template to maintain the aspect ratio and center itself in the available space within the component bounds. Is that possible?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 23, 2024, 7:59pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/2 "2024-02-23T19:59:20Z")

</div>

It's MigLayout:  
[https://www.migcalendar.com/miglayout/mavensite/docs/cheatsheet.html](https://www.migcalendar.com/miglayout/mavensite/docs/cheatsheet.html)

Centering, yes. Aspect ratio... Probably.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2024, 8:52pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/3 "2024-02-23T20:52:40Z")

</div>

I tried `ins 0, fill, grow, push, align center` but I just get the little error triangle. The template shows up if I use the default `ins 0, fill`

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 23, 2024, 8:56pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/4 "2024-02-23T20:56:27Z")

</div>

The property at the top level only sets the outer container's constraints.  
Directives like push, grow, align are all applied to the individual component - you need them to end up in your template canvas dataset/to set them via the customizer.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2024, 8:59pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/5 "2024-02-23T20:59:46Z")

</div>

Like so?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/eee23dd09e932714e927f898202fdb5802c975d8.png)

No change.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 23, 2024, 9:12pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/6 "2024-02-23T21:12:31Z")

</div>

Any errors in the output console? What do you have for your container layout props? Can you show the error indicator you're seeing?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2024, 9:18pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/7 "2024-02-23T21:18:54Z")

</div>

Nothing in the output console.

Not sure which prop you're referring to. This is a popup view with the root container. The template canvas is inside the root container. There are no layout options on the window or root container view. The template canvas is set to relative layout.

The error indicator I was seeing was when I was putting `ins 0, fill, grow, push, align center` all in the Layout Constraints for the template canvas component, before I moved everything after 0 into the templates dataset prop.

In that case, I got the following error in the console

```auto
15:18:30.959 [AWT-EventQueue-0] WARN Vision.TemplateCanvas - Error during layout construction
java.lang.IllegalArgumentException: Illegal Constraint: 'grow'
Unknown Constraint: 'grow'

	at net.miginfocom.layout.ConstraintParser.parseLayoutConstraint(Unknown Source)
	at net.miginfocom.swing.MigLayout.setLayoutConstraints(Unknown Source)
	at net.miginfocom.swing.MigLayout.<init>(Unknown Source)
	at net.miginfocom.swing.MigLayout.<init>(Unknown Source)
	at com.inductiveautomation.factorypmi.application.components.TemplateCanvas$LayoutPanel.<init>(TemplateCanvas.java:814)
	at com.inductiveautomation.factorypmi.application.components.TemplateCanvas._rebuild(TemplateCanvas.java:246)
	at com.inductiveautomation.ignition.client.util.EDTUtil$ProcessQueue.run(EDTUtil.java:126)
	at java.desktop/java.awt.event.InvocationEvent.dispatch(Unknown Source)
	at java.desktop/java.awt.EventQueue.dispatchEventImpl(Unknown Source)
	at java.desktop/java.awt.EventQueue$4.run(Unknown Source)
	at java.desktop/java.awt.EventQueue$4.run(Unknown Source)
	at java.base/java.security.AccessController.doPrivileged(Unknown Source)
	at java.base/java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(Unknown Source)
	at java.desktop/java.awt.EventQueue.dispatchEvent(Unknown Source)
	at java.desktop/java.awt.EventDispatchThread.pumpOneEventForFilters(Unknown Source)
	at java.desktop/java.awt.EventDispatchThread.pumpEventsForFilter(Unknown Source)
	at java.desktop/java.awt.EventDispatchThread.pumpEventsForHierarchy(Unknown Source)
	at java.desktop/java.awt.EventDispatchThread.pumpEvents(Unknown Source)
	at java.desktop/java.awt.EventDispatchThread.pumpEvents(Unknown Source)
	at java.desktop/java.awt.EventDispatchThread.run(Unknown Source)

```

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [February 23, 2024, 9:44pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/8 "2024-02-23T21:44:34Z")

</div>

idk why I'm trying to do this the hard way... I'll just increase the size of my template to match the canvas and center things within my template. 😅

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 23, 2024, 10:06pm UTC](https://forum.inductiveautomation.com/t/template-canvas-layout-constraints/86287/9 "2024-02-23T22:06:51Z")

</div>

So, simple centering is easy:

 ![Screenshot 2024-02-23 at 2.02.02 PM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/0/40f57bc76d6760004c715bfcacdeadc718c11a4f.png)  
These template canvases are `ins 0, fill`. The inner templates are just `align center`.

Maintaining an aspect ratio is tricky _for an arbitrary template_. MigLayout is, at its core, built around a table-based layout approach that doesn't really care about preserving aspect ratio, only components' preferred sizes. It would probably be possible to do some live math using the actual size of the canvas and passing that into the constraints on the component, but it's probably not worth it.
