PolymerElements / iron-resizable-behavior

14 stars 21 forks source link

what is the recommended way to get clientWidth/height? #7

Closed d1manson closed 8 years ago

d1manson commented 9 years ago

I am a little confused as to exactly how this behavior is supposed to work, although I have now got it to produce the results I need.

Anyway, I have a situation that boils down to this:

<div>
   <svg style="position:absolute">  <line x1=0 y1=0 x2=? y2=?/> </svg>
   <my-element special_content="hello world" style="position:absolute"></my-element>
</div>

I'd like to be able to have x2,y2 of the svg-line bound to the bottom-right of my-element, which means I need to update some vars whenever my-element is resized. I seem to have manged this using on-iron-resize, but only if I wrap the call to clientWidth/clientHeight using async(~, 1)/debounce(~, 1). (If you do it synchronously, and set a breakpoint, you can see that some of the css has not yet been applied so, for example, icons appear too big.)

[edit] I have now refactored slightly, making width and height properties on my-element which are child-to-parent binding, so that the details of updating to size changes can be kept inside my-element. Note that the problem still exists only now it is more contained. [/edit]

Is this the right way to do it? And is the current implementation providing the intended behaviour? If not, is there a possibility of including this additional async step as part of the API here rather than requiring the user to do it themselves. At least this extra step should be discussed in the docs.

Thanks!

kevinpschaaf commented 8 years ago

@d1manson Are you still struggling with this? If so, please reopen and attach a repro in a jsBin (http://jsbin.com/guyoqowoha/1/edit?html,js,output) per the contributing guide? That'll help us guide you.