Re: paper-button showing two layers at elevation?

[weipin...@gmail.com]

Can you post the code? Thanks.

On Friday, June 26, 2015 at 12:05:14 PM UTC-5, CragVFX wrote:

<paper-button raised on-click="_doSomething">create</paper-button>

The button is showing like the image I attached.

Not sure why?

Thanks!

[CragVFX]

<link rel="import" href="/paper-material/paper-material.html">

<link rel="import" href="/paper-button/paper-button.html">

<link rel="import" href="/paper-input/paper-input.html">

<link rel="import" href="/gold-zip-input/gold-zip-input.html">

<dom-module id="new-form">

    <style>

        .box-props {

            background-color: white;

            width: 80%;

            margin-top: 30px;

            margin-bottom: 30px;

            padding: 20px;

        }

        .box-inputs {

            padding-left: 20px;

            padding-right: 20px;

        }

        .box-button {

            margin-top: 20px;

            /*padding: 5px;*/

        }

    </style>

    <template>

        <div class="horizontal layout center-justified">

            <paper-material elevation="2" class="box-props">

                <h1 class="middle paper-font-display2 app-name" align="center">Form </h1>

                <div class="box-inputs">

                    <paper-input id="name" label="Location Name" value="{{name}}" char-counter maxlength="50"></paper-input>

                    ...etc...

                </div>

                <div class="horizontal layout center-justified box-button">

                    <paper-button raised style="background:rgb(0, 161, 245);color:white;width:20%;" on-click="_validateRequiredFields">create</paper-button>

                    <paper-button raised style="background:grey;color:white;width:20%;">cancel</paper-button>

                </div>

            </paper-material>

        </div>

    </template>

    <script>

        Polymer({

            is: 'new-form',

            properties: {

                name: '',

            },

            _validateRequiredFields: function() {

                console.log('validating required fields...');

                //check if required fields are present then this._createAttempt();

            },

            _createAttempt: function() {

                var self = this;

                console.log('firing form-create');

                this.fire('form-create', {

                    name: self.name

                });

            },

            _notifyOnBadAttempt: function() {

                //toggle paper toast here

            }

        });

    </script>

</dom-module>

[CragVFX]

I figured out the issue, and it was not polymer related, I am using it within backbone and marionette, and I needed to surround my <new-form></new-form> inside a div for it to render properly... weird.