Constant Container Aspect Ratio

Ignition
1

I want to be able to make a dashboard in a coordinate container then keep that aspect ratio the same no matter how big the window is that it is being viewed in. Is this possible?

2

props.aspectRatio on the container, hmm? (Only applicable in percent mode.)

1 Like
3

That close to what I'm looking for. My issue is that the label text doesn't follow this aspect ratio and will overlap outside of the box. Do you know if there is a way to have the text follow this same ratio?

image
image500×199 6.33 KB

4

Ah, no. There are other recent discussions of this issue on the forum.

If it were me, I'd deploy with BIJC's Pan/Zoom 3rd party module.

1 Like
5

I use CSS Container Queries to adjust the font size based on the size of the container that the text is in:

.psc-Cards\/QueryContainer {
	container-type: size;
  	container-name: card;
  	font-family: Arial;
}
@container card (width >= 380px) and (height >= 380px) {
	.psc-Cards\/LargestText { font-size: 52px !important; }  
	.psc-Cards\/LargeText { font-size: 42px !important; }  
	.psc-Cards\/MediumText { font-size: 24px !important; } 
	.psc-Cards\/SmallText { font-size: 18px !important; } 
	.psc-Cards\/SmallestText { font-size: 13px !important; }  
}
@container card (width < 380px) or (height < 380px) {
	.psc-Cards\/LargestText { font-size: 48px !important; }
	.psc-Cards\/LargeText { font-size: 40px !important; }
	.psc-Cards\/MediumText { font-size: 23px !important; }
	.psc-Cards\/SmallText { font-size: 17px !important; }
	.psc-Cards\/SmallestText { font-size: 12px !important; }  
}

It's a pain, because you have to account for all the potential sizes of the container, and figure out the corresponding font size, but it works.

6

So I just learned that my example above is doing it the hard way, when I learned about the unique length units available to container queries (CSS container queries - CSS | MDN). I updated that project I made for you yesterday to demonstrate:

TEST_2025-06-19_0914.zip (46.5 KB)

The CSS is much simpler:

.psc-LabelContainer {
	container-type: size;
  	container-name: card;
  	font-family: Arial;
}
@container card (width >= 0px) and (height >= 0px) {
	.psc-Label { font-size: min(15cqw, 22cqh); }  
}
3 Likes
7

I think this is exactly what I was looking for. Thank you so much!

1 Like
8

where does this CSS go?

9

In stylesheet.css. You'll need to "Enable Advanced Stylesheet":

10

Thank you

11

does this work with embedded views? I have objects that are several layers deep. Main overview page with an embedded view of a view that has a coordinate container with another embedded view of a view with a coordinate container that has two labels in it. I'm not sure where the styles would need to be applied or if it can even work.

12

I'm sure it would. It's just a matter of applying the styles to the container (LabelContainer in my example) and the label that is somewhere inside that container (Label). You create and assign those styles in the normal way, then define them in stylesheet.css by adding the prefix .psc-