Swipe page not showing up on load

[oneezy]

My swipe page isn't showing up until I click on the paper tab.

I'm not using the the template[is="dom-bind"] method,,,

I'm trying to make it work inside the Polymer({ is: ... script (not sure if this correct or not)

Here's what I've got right now:

<!--
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    Forms (page)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-swipeable-pages/iron-swipeable-pages.html">

<link rel="import" href="../components/component-page.html">
<link rel="import" href="forms-contact.html">
<link rel="import" href="forms-quote.html">

<dom-module id="page-forms">
<template>

    <style>
    :host {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: #fff;
    }

    iron-swipeable-pages { z-index: 1; }
    iron-swipeable-pages > * {
        padding: 2rem;
        -webkit-user-select: none;  /* Chrome all / Safari all */
        -moz-user-select: none;     /* Firefox all */
        -ms-user-select: none;      /* IE 10+ */
        user-select: none;          /* Likely future */
        cursor: default;
    }
    forms-contact {  }
    .page { height: 100%; }

    </style>

<!--  Content
---------------------------------------------------------------------------------------------------------------->
    <component-page grid="vertical" layout="start-center" padding-t="20" min-height="1">

        <!-- Select Menu -->
        <paper-tabs selected="{{selectedForm}}" mobile-width=".9"
                                                tablet-width=".75"
                                                desktop-width=".5">
                    <paper-tab>
                        <iron-icon icon="communication:forum"></iron-icon>
                        Contact Form
                    </paper-tab>

                    <paper-tab>
                        <iron-icon icon="icons:settings"></iron-icon>
                        Rebuild Form
                    </paper-tab>
        </paper-tabs>

        <iron-swipeable-pages on-selected-changed="_onSelectedChanged" selected="{{selectedForm}}" flex="auto" width="100" show-arrow>

                    <!-- Contact Form -->
                    <div class="page" grid="vertical" layout="start-center">
                        <forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact>
                    </div>

                    <!-- Contact Form -->
                    <div class="page" grid="vertical" layout="start-center">
                        <forms-quotemobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-quote>
                    </div>
        </iron-swipeable-pages>

        <fx-skew bg="white"></fx-skew>
    </component-page>
<!--  Content
---------------------------------------------------------------------------------------------------------------->

</template>

<script>

    Polymer({
      is: "page-forms",

      selectedForm: {
                value: 0
              },

      _onSelectedChanged: function(e) {

          var target = e.target;
          target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!");
      }

    });

</script>
</dom-module>

[oneezy]

Ahh, never mind. Here's the correct way to do it.

    <script>

        Polymer({
          is: "page-forms",

          properties: {
              selectedForm: {
                  type: Number,
                  value: 0
              },
          },

          _onSelectedChanged: function(e) {

              var target = e.target;
              target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!");
          }

        });

    </script>

[MeTaNoV]

Hi @oneezy , glad you found a solution so quickly! :)