How do I get the height and width of an element and also the height and width of the document. What is the equivalent of jQuery’s $('#start-button').width() and $(document).width()? I don’t mean the default height, but the actual height based on how it looks in the viewport.
Oh. and how would I get the element’s x and y?
I believe that you can only get that information if you are using the coordinate container.
Each object in a coordinate container should have a {objectName}.position.{property}. That will container x,y,width,height etc…
Hi @ToMakPo, the short answer is you can’t as far as I’m aware for individual components.
8.1.6 exposes viewport width, etc.
I don’t want the hard coded information that I put in myself in the designer. I want the actual width of the element being displayed to the end user on their varying screen sizes.
Then see @matthew.ayre post
Stepping back a little: Why?
Not to say that we will never provide access to such information, but generally speaking, designing things around specific component sizes is an anti-pattern; you should let layout (and browser zoom controls) do things for you.
There are probably work arounds to pretty much any issues that I might come across and so far, I’ve been able to find some that mostly work, but it would be so much easier if I didn’t have to find a solution. For example, right now, I want a child element to be exactly 15px smaller than 1/7 the width of the parent, 14.3% - 15px. There might be a way to do that without knowing the parent width, but I don’t know how. There have been several other times in the last week that I’ve had similar issues. When I was working with JS, I looked up the width of elements almost daily. It just seems like one of those things that people would use all the time. The real question isn’t why would I need it, it should be, why is it being hidden?
I can't answer this.
But I may be able to answer this 
You could use nested flex containers. Lets say you have a view with a structure of root > Flex1 > Flex2. On Flex1 you can place a margin of 85.7% (6/7) on one side (remember to half this if you want the margin on each side for central alignment). On Flex2 you can then place a 15px margin to get your final offset. You then just place everything in Flex2.
Hope that makes sense/helps
For what I am needing this for, that isn’t going to work, and even if it did, even if that was the best solution, how is that in any way better then just having the size of parent and doing a bit of math? That is so much more complicated.
I think we could possibly consider adding this. In the meantime, have you tried
minWidth: calc(14.3% - 15px) on the child…?
How would I add that? minWidth isn’t one of your style options.
You're right it's not the best solution, but it was the best I could come up with off the top of my head at that moment, after a lovely day of staring at legacy code (swearing under my breath 
) 
.
@ynejati's suggestion is the best solution.
Many CSS styles will work in Perspective, of which minWidth is one of them. You should be able to manually add it to the style object by selecting the + icon and adding a value. The key:value pair should match @ynejati's suggestion
Admittedly, this hasn't been well documented in the past (in my experience, although I probably didn't look in the right places ). In 8.1.4 a lot of the CSS properties were added, but it still seems like some are missing, such as minWidth and maxWidth.
I didn’t know I could add things that aren’t on the list. That’s cool. Is there a place that shows all the available styles including the ones not on the list?
Unfortunately not, as far as I’m aware. I think a lot of stuff from css3 can be applied, but it takes a bit of experimentation to find out what works where 
This is a good reference: https://cssreference.io/
Just make sure you use the JavaScript name, so min-width should be minWidth. Min-width will work in most cases, but it’ll present you with some visual errors.
We might override some layout properties given to a child component by its parent container. So, not everything might work as you expect. The list is minimal, however.
I’m curious about what you are creating that you need to know the elements size and its x, y coordinates relative to the page? I’m assuming the page? Or is it the parent? Care to provide some more insight into your objective? Thanks.
For this particular issue, I am building a calendar app and the calendar event element needs to take up one column (1 / 7) of the calendar area. And it needs to have 15 px on the side incase the user needs to select the time instead of the event.
But there have been a number of other issues where having the width and height of other elements on the page would have been helpfull. There is always a work around but I sometime feel like I spend more time trying to find work arounds for the limitations than I do creating software.
It’s not all bad though. I have been learning a lot more about the software than I otherwise would have.
Personally, I’ve never come across an instance where I have needed to know the width or height of a component. Margins, padding, and the various responsive containers I’ve found can be used to make pretty much any design.
Can you share a screenshot of what you want it to look like? Even a sketch is fine and we can help suggest how to achieve it
Your minWidth solution work fine on elements inside of a coordinate container, but it’s not working for instances in the view canvas.
I believe I can. Perspective does not hide width and height properties, it just doesn't collect them from the client/browser.
As far as i'm aware, all Perspective scripts and expressions are handled on the server side of Ignition. (please correct me if I'm wrong, I would love to know exactly what happens server or client side). This would make dynamically calculating dimensions that come from the users browser (client) undesirable even if it was possible.
It would mean you would first push your views to the client/browser, then request certain dimensions from de client/browser, calculate some other dimensions on the server and the send it back to the client/browser. Javascript is able to do all of this client side, Perspective is not.
I would not consider it desirable for Perspective to constantly recieve the dimensions from the client on resize events, it would create unnecessary network traffic.
It would however be very desirable to be able to write javascript code for Perspective clients, but I don't believe thats going to happen anytime soon.
Or ever. IA has made it clear that if you want client-side javascript in your Perspective application, you need to make your own 3rd-party module. I understand, as allowing user-supplied javascript would be a support nightmare. User's of 3rd-party modules are expected to get relevant support from the module author, not from IA.