Programmatically change an element’s height from the outside

Question

I have four Polymer elements A-A, B-1, B-2, and X-X with X-X including A-A and B-1. B-1 is including B-2. The height of A-A should determine the height of B-2. I get the height of AA via the script this.$.A-A.offsetHeight; - so far so good.

But how do I programmatically (via script) change element’s B-2 height?

Even better would be to change the height of .myB2class in element B-2.

Element X-X

<polymer-element name="X-X" on-click="{{getHeight}}">
  <template>
    <style>
      :host {
        display:block;
      }
    </style>

    <A-A></A-A>

    <B-1></B-1>

  </template>
  <script>
    (function () {
      Polymer('X-X', {
        getHeight: function() {
        var heightAA = this.$.A-A.offsetHeight;
        console.log(height);
        }
      });
    })();
  </script>
</polymer-element>

Partially succeeding...

After trying everything what Google threw back at me, I'm happy that at least this piece outputs something other than null:

var B2 = document.querySelectorAll("B-2::shadow .myB2class");

...more precisely console returns:

[div#x.flext-content-story-body, item: function, array: function]
 ›  0: div#x.flext-content-story-body
    length: 1
 ›  __proto__: NodeList

BUT, trying to set the height via .style.height = heightAA; returns undefined (same with static value "100px"). Oh, and then reading something like this is just to good to be true (tried it, no reaction, nada, no error, no output):

You can dynamically change an element’s styling by, you guessed it, modifying its .style property.

From the outside:

var xFoo = document.createElement('x-foo');
xFoo.style.background = 'blue'; [e.g. xFoo.style.height = '100px']

I'm probably just overseeing a tiny detail so please, feel free to jump in.

Flying Emu · Answer 1 · 2015-05-03T03:04:39.900

0

First of all your element name should contain a dash so something like 'x-x' and same goes with B1, B2 and AA.

As for selecting B2, try:

var B2 = document.querySelector("xx::shadow B1::shadow B2");

edited May 03 '15 at 03:04

answered May 03 '15 at 02:52

Flying Emu

430
6
14

Yep, Polymer element names require a dash. Updated them just for clarity. Your suggestion does work! The problem was the _All_ in _querySelectorAll_. – mikekasky May 03 '15 at 10:11

score 0 · Answer 2 · answered May 03 '15 at 10:21

To programmatically change any polymer element’s height from the outside:

document.querySelector('any-polymer-element::shadow').style.height = "99px";

To programmatically change any div's height in any polymer element’s from the outside:

document.querySelector('any-polymer-element::shadow .any-div').style.height = "99px";

Thanks to Flying Emu for dropping the All in document.querySelectorAll which solves the problem. It was before my eyes in 0: div#x.flext-content-story-body but I didn't see it!

Programmatically change an element’s height from the outside

2 Answers2