# Need help on perspective layout **URL:** \ **Category:** Ignition Early Access\ **Created:** [January 11, 2020, 8:09am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233 "2020-01-11T08:09:10Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 11, 2020, 8:09am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/1 "2020-01-11T08:09:11Z")
Hello As it shown in image below I want to overlay some component over map. I want map expand(scale) with browser size but overlay UI interface doesn’t scale. This is happens in google map size. When I resize browser the UI interface will always anchor and maintain their size. How did they do this? The only container in perspective that I can use for overlaying item on each other is xy coordinate and to make map expand I set percent mode so the problem is my overlay UI interface is also scale. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/ae1d15dd12e6686016323e7f6b9eff9a97e0a432.png) Thanks. ---
**Author:** ![Matrix\_Engineering](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matrix_engineering/32/19781_2.png) [@Matrix\_Engineering](https://forum.inductiveautomation.com/u/Matrix_Engineering)\ **Post date:** [January 11, 2020, 8:13am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/2 "2020-01-11T08:13:09Z")
I’m no 8.0 expert (yet!) but looking at the iFrame properties of a location might give some clues: iframe src=“[https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d73968.40792802477!2d-5.9966715907833255!3d54.59495923962353!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4860fffdd7d08a3b%3A0x2e57162cefc7c531!2sBelfast!5e0!3m2!1sen!2suk!4v1578730265733!5m2!1sen!2suk](https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d73968.40792802477!2d-5.9966715907833255!3d54.59495923962353!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4860fffdd7d08a3b%3A0x2e57162cefc7c531!2sBelfast!5e0!3m2!1sen!2suk!4v1578730265733!5m2!1sen!2suk)” width=“600” height=“450” frameborder=“0” style=“border:0;” allowfullscreen=""\>\ **Author:** ![Matrix\_Engineering](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matrix_engineering/32/19781_2.png) [@Matrix\_Engineering](https://forum.inductiveautomation.com/u/Matrix_Engineering)\ **Post date:** [January 11, 2020, 8:14am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/3 "2020-01-11T08:14:43Z") function onApiLoad() { var embed = document.createElement(‘script’); embed.src = “[https://maps.gstatic.com/maps-api-v3/embed/js/39/6/init\_embed.js](https://maps.gstatic.com/maps-api-v3/embed/js/39/6/init_embed.js)”; document.body.appendChild(embed); } ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 11, 2020, 8:15am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/4 "2020-01-11T08:15:43Z")
I don’t get it, how I can re-create that layout in perspective? ---
**Author:** ![Matrix\_Engineering](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matrix_engineering/32/19781_2.png) [@Matrix\_Engineering](https://forum.inductiveautomation.com/u/Matrix_Engineering)\ **Post date:** [January 11, 2020, 8:17am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/5 "2020-01-11T08:17:04Z")
I don’t know… but your image text says “How can I make similar UI interface?” so my suggestion is dig into how Google do it using the tricks of the trade… then apply to Ignition ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [January 11, 2020, 4:07pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/6 "2020-01-11T16:07:23Z")
Uhm, Perspective isn’t as complete/mature as ten-year-old Vision. Some things Vision can do aren’t yet possible in Perspective. And might be years away. (It has been adding features faster than I expected, fwiw.) If IA waited to release Perspective when it reached feature parity with Vision, we’d be waiting a long time. And Perspective does things Vision can’t do (and likely will never do). If a customer absolutely needs a feature that only Vision can currently do, give them Vision. That’s why it is still part of Ignition. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 12, 2020, 4:55am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/7 "2020-01-12T04:55:04Z")
It’s not some thing that perspective can’t do, specially it’s basic feature and something that implement easily in web world. So I don’t know how to do this directly with available tools in perspective may be we can do this with direct css3 code in perspective and with some trick. If some one in forum know perspective and also be a web dev, he/she would surely will solve this puzzle. ---
**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\ **Post date:** [January 12, 2020, 5:40pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/9 "2020-01-12T17:40:49Z")
> [@nader.chinichian](#): > > I set percent mode Try `fixed` mode instead and set width and height of the map component to `100%`. Most of the diplay related properties in perspective are in fact CSS styles. You can use CSS units there. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 12, 2020, 6:04pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/10 "2020-01-12T18:04:38Z")
Thanks chris. But with fix mode I can’t anchor overlay objects on map to bottom right corner because I don’t know the browser run time height. The only solution is to have runt time height and width of browser in perspective session. ---
**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\ **Post date:** [January 12, 2020, 6:28pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/11 "2020-01-12T18:28:57Z")
> [@nader.chinichian](#): > > on map to bottom right corner I'm not sure i understand your problem. The CSS styles for bottom right positioning are `bottom` and `right`. In your overlay container, set x and y position to `auto` (Perspective won't let you delete them) and add additional `bottom` and `right` styles in the `style` property. As i said before, the position properties are simply CSS styles. One of the concepts of CSS is to hide the browser runtime height and width from you, so you should use the appropriate CSS styles instead. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [January 13, 2020, 3:42pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/12 "2020-01-13T15:42:02Z")
Have you considered using the View Canvas component? you would need to set the appropriate `useDefaultView Width/Height` properties to False, but I believe this would allow for the Map to grow with the browser (if `bottom` and `right` are left as “auto”) while allowing you to define the dimensions of the UI pieces you have specified. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 14, 2020, 5:48am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/13 "2020-01-14T05:48:19Z")
Thanks Chris. Now I get it. I didn’t know I should set x and y position to `auto`. It works. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 14, 2020, 5:48am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/14 "2020-01-14T05:48:53Z")
Hi Cody Thanks amazing component I didn’t notice it. it also solve my problem. ---
**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\ **Post date:** [January 14, 2020, 3:53pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/15 "2020-01-14T15:53:29Z")
For anyone’s future reference, this is roughly the layout stack which was used to accomplish this. The View Canvas component allowed @nader.chinichian to absolute position these views “above” the main map layout. Combining z-index props and top/right/bottom/left positioning. ![view-canvas-layout](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c0da10a28697ccaec5f880cac98081f789742245.png) ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [January 18, 2020, 11:58am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/16 "2020-01-18T11:58:32Z")
Hi Ray. It seems top: 5px in v8.0.6 doesn’t offset and work correctly. it only snap object to top with zero pixel offset and ignore the 5px offset. But other left right and bottom property works as they should be with the offset. It may be bug. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [March 7, 2020, 7:50pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/17 "2020-03-07T19:50:54Z")
Hi Chris, The solution you mention is work for me with a simple bug. I want to offset from left side like left: 30px it snap to the edge. The offset only work with right side. As you told: position: absolute x: auto left: 13px Could you test it on your end, i believe it is bug. I use 8.0.6. See this problem for ViewCanvas but this time for right side. ---
**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\ **Post date:** [March 8, 2020, 9:41am UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/18 "2020-03-08T09:41:29Z")
Hi, ignition replaces `x` and `y` properties with `top` and `left` in the output of a coordinate container. So, the properties `x:auto;right:13px;` create the css `left:auto;right:13px;`. When you say `x:auto;left:13px;` the result is `left:auto;left:13px;`. The `auto` wins here. Is there a reason you don’t use `x:13px`? ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [March 8, 2020, 8:17pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/19 "2020-03-08T20:17:23Z")
Hi the reason I use your method is to snap my object to edge of my view in coordinate container with fix mode. I recreate google map layout with this successfully. This make me to simulate anchor mode of vision. But as I told and if you test it, you see the left : 13 px doesn’t offset object from left with 13px. On the other hand right: 13px works correctly. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/6b157842ce13e8bffd4e300e476b2d7e4c5277f6.png) Can you recreate this image? The viewCanvas has same problem. ---
**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\ **Post date:** [March 8, 2020, 9:21pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/20 "2020-03-08T21:21:23Z")
> [@nader.chinichian](#): > > left : 13 px doesn’t offset object from left Please read my post. Did you try `x:13px`? I tested this in a coordinate container, ---
**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\ **Post date:** [March 9, 2020, 8:47pm UTC](https://forum.inductiveautomation.com/t/need-help-on-perspective-layout/31233/21 "2020-03-09T20:47:48Z")
In 8.0.9, i can’t reproduce your problem. `x` and `y` position in a coordinate container work as expected for me. There is no need to use additional `top` or `left` attributes. ![grafik](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a33f3f0dcaca17ed41d9117551523fce2386d1c6.png)