Re: Best approach to measuring custom element dimensions?

[Daniel Freedman]

If you give test-element display: block, then it will have the correct offsets.

See http://jsbin.com/uvukud/1/edit

On Wed, Jun 5, 2013 at 10:07 AM, Jan Miksovsky <j...@quickui.org> wrote:

Is it possible to inspect the dimensions of an element with a shadow root?

I'm trying to port some UI components to custom elements, and a number of the custom elements need to be able to inspect their own dimensions, or the dimensions of other custom elements. However, the dimensions (clientHeight/clientWidth or offsetHeight/offsetWidth) of a custom element with a shadow root appear to be returned as zero. See http://jsbin.com/awiqot/2/edit for an example.

It's possible to workaround this in specific cases (e.g., wrap a div around a custom element whose dimensions you want to measure, then inspecting the dimensions of the div), but I'm hoping there's a clean solution for the general case.

Thanks.

--
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Scott Miles]

The problem here is that by default HTML elements are `display: inline`. 

If you make your element `display: block` the problem goes away: http://jsbin.com/abizut/2/edit

We would prefer custom elements default to `display: block`, but there is no really robust solution on the table yet.

[Eric Bidelman]

Added http://www.polymer-project.org/faq.html#why-does-my-element-claim-its-clientwidthclientheight-is-0

[Jan Miksovsky]

Daniel/Scott: Many thanks for this workaround. Whew.

I hope a solution can be found! Having to specify block/inline-block on my custom elements to get the expected behavior is a drag, but more worrisome is that custom elements in general — including those from other people — can't be expected to provide a reliable estimate of their own size. If I have a custom element that does layout work based on the dimensions of its children, and one of those children is a naive custom element from someone else with the default (but undesired) value of display: inline, then my custom element won't be able to lay things out correctly. It could try to force display: block (or inline-block), but would then end up fighting with some other display value the custom element in question actually wanted.

[Erik Arvidsson]

getBoundingClientRect().height works for me.

OT: getBoundingClientRect is always preferred since it is lossless in case of zooming. If the user zooms and you use offset* you will get rounding errors in your layout eventually.

erik

[Jan Miksovsky]

Erik: getBoundingClientRect() is appealing, but I immediately hit at least one case where it didn't work as expected. If the custom element puts its content in a button (http://jsbin.com/ejiyun/1/edit), getBoundingClientRect() returns something other than the visible bounds of the custom element. I'm out of my depth in this area, so I can't tell whether there's a bug here or not.

[Jan Miksovsky]

Today I ran into this problem again, and eventually remembered I had to work around it by setting display: block (or inline-block) on the host element.

Scott (or other knowledgable people): Above you mention that there's no solution on the table yet for this issue. I was wondering if this issue is being tracked by a bug I can follow for progress.