# Have Embedded View Scale from Screen Size

**URL:** <https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 13, 2022, 3:34pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855 "2022-07-13T15:34:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mitchell\_Lagenour](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Mitchell\_Lagenour](https://forum.inductiveautomation.com/u/Mitchell_Lagenour)\
**Post date:** [July 13, 2022, 3:34pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/1 "2022-07-13T15:34:35Z")

</div>

I was wondering if there was a way for the contents in an embedded view to scale based on the screen size.

This embedded view is using coordinate container view.

It would be like how percent mode works in coordinate container. Except, instead of every component scaling, the view itself scales like it was an image.

I want to eliminate having to scroll if the screen is smaller than the view size. I would like it to scale like its an image based on the screen size.

Thanks

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 14, 2022, 6:15am UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/2 "2022-07-14T06:15:28Z")

</div>

im not sure what the goal is.  
but you can use vh and vw  
or a comboination of % and vh vw with calc  
to apply such width/height values you need to be in fixed mode (as percentage mode changes everything to a number)

> **[CSS Units](https://www.w3schools.com/cssref/css_units.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![Mitchell\_Lagenour](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Mitchell\_Lagenour](https://forum.inductiveautomation.com/u/Mitchell_Lagenour)\
**Post date:** [July 15, 2022, 5:37pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/3 "2022-07-15T17:37:21Z")

</div>

Below is a photo of the problem:

 ![1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/557eb2a13cc66824c950942357986db313219bcd.png)

If using a screen that is small enough, the contents goes over and you have to scroll to view the rest.

The goal is that instead of having the scroll bar, the screen shrinks to accommodate the smaller screen size.

I know there is a percent mode with the coordinate container, however the components scale where nothing is lined up anymore.

I would like it to scale as if it was an image if that makes sense.

---

<div class="post-metadata">

**Author:** ![craigb](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@craigb](https://forum.inductiveautomation.com/u/craigb)\
**Post date:** [July 15, 2022, 5:42pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/4 "2022-07-15T17:42:29Z")

</div>

This may help

> [@Responsive labels for SVG's](https://forum.inductiveautomation.com/t/responsive-labels-for-svgs/61441/2):
>
> If the labels are part of the SVG then they will stay in the same place? What do you mean by responsive?

---

<div class="post-metadata">

**Author:** ![Mitchell\_Lagenour](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Mitchell\_Lagenour](https://forum.inductiveautomation.com/u/Mitchell_Lagenour)\
**Post date:** [July 15, 2022, 5:57pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/5 "2022-07-15T17:57:56Z")

</div>

The problem is, when I try that, it looks like this:

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

It may be a problem with how the screen was designed

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [July 15, 2022, 6:27pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/6 "2022-07-15T18:27:44Z")

</div>

Labels do not scale. If you want them to then use an SVG as outlined in this post,

> [@Scaling Font size based on Container Size](https://forum.inductiveautomation.com/t/scaling-font-size-based-on-container-size/57411):
>
> Hello Everyone, I want to scale the font size based on container size. In my case, I added the widgets to the dashboard component. In that widget view, only text labels appear. In some cases, I need to enlarge the widgets while adding them to the dashboard. At that time, I want to increase the font size based on the widget size. When I tried with MediaQuery Style, it worked based on session size. But I need to scale the size based on the widget size.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 18, 2022, 9:40am UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/7 "2022-07-18T09:40:49Z")

</div>

Doesnt look like its just the labels, the pumps are way to small too.

@Mitchell_Lagenour  
You have more options to scale though, if you set it to percent and fill in the **aspect ratio** , maybe you have a bit better results

Also @jlandwerlen, as i stated in the solution in the topic you linked, its really not a solution and more a work around xd  
I wouldnt advice to put the text inside the svg, its way to bothersome, instead you should put a lineheight, or overflow on the labels. (and mayb a hover effect to show the full text on hover?)

---

<div class="post-metadata">

**Author:** ![Mitchell\_Lagenour](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@Mitchell\_Lagenour](https://forum.inductiveautomation.com/u/Mitchell_Lagenour)\
**Post date:** [July 18, 2022, 3:24pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/8 "2022-07-18T15:24:41Z")

</div>

I am not having any luck with the aspect ratio.

Is there a better way to design this type of layout that scales with the screen size better?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [July 18, 2022, 4:43pm UTC](https://forum.inductiveautomation.com/t/have-embedded-view-scale-from-screen-size/61855/9 "2022-07-18T16:43:30Z")

</div>

Maybe don’t use an embedded view. Looking at your example, I’m not sure using an embedded view is the best approach.

I have had very good luck using a coordinate container and the aspect ratio.
