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.
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?
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.
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.
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.
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
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.
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.