CODEWITHSUNDEEP
polymerpolymer-1.0
dman
dman

Reputation: 11064

height on hosted custom element is being applied when dom-if is false

Polymer 1.1

Even though the template is not showing, the height: 30% is still being applied to the document resulting in a white empty space. I know that it is being applied even when dom-if is false because if I remove the height: 30% from :host{} then the white space goes away.

What can I do? I need the height applied to :host when the template does show. 

<dom-module id="portfolio-page">
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 30%;
     }

    section {
      width: 100%;
    }

    @media all and (min-width: 1200px) {
      section {
        width: 90%;
      }
    }
  </style>

  <template>
    <template is="dom-if" if="{{show}}">
      <section>
        <div onclick="page('/')"
          class="vertical layout">
          <div>
              <h2>BLAH</h2>
          </div>
        </div>
      </section>
    </template>
  </template>

  <script>
    Polymer({
      is: "portfolio-page",
      properties: {
        show: {
          type: Boolean,
          value: false
        }
      }
    });
  </script>
</dom-module>

Upvotes: 0

Views: 53

Answers (1)

Westbrook
Westbrook

Reputation: 608

If you set the reflectToAttribute key to true on "show" then you can style as follows:

<style>
:host[show="true"] {
    height: 30%;
}
</style>

Upvotes: 1

Related Questions