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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Can you recreate this image?
The viewCanvas has same problem.
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.
