Search code examples
templatesdialogpolymerpolymer-1.0jsbin

Polymer 1.0: How do I remove white space around <paper-button> in <paper-dialog>?

Question

How do I remove all the white space around the <paper-button> elements (only) inside a <paper-dialog> element?

So, for example, the hover effect should go all the way to the edge. But I still would like to retain the white space surrounding the paragraph text.

Demo:

  1. Click this JS Bin for working example code.
  2. Special note to Safari users: Use Chrome to view demo.

Attempts:

In the code and demo, I commented all my prior attempts /* No effect */.

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Polymer Bin</title>

    <base href="http://element-party.xyz">
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="all-elements.html">

</head>

<body>
<x-element></x-element>


    <dom-module id="x-element">
    <style>
        :host {           /* No effect */
            display: block; /* No effect */
        margin: 0;
        }
        paper-dialog {
            width: 400px;
            margin: 0;   /* No effect */
            padding: 0;  /* No effect */
        }
        paper-button {
            width: 100%; /* No effect */
            margin: 0;   /* No effect */
        }
        paper-dialog::shadow { /* No effect */
            margin: 0 auto;      /* No effect */
            padding: 0 auto;     /* No effect */
        }
        paper-button:hover{
            background-color: black;
            color: white;        
        }
    </style>
        <template>
            <paper-dialog id="dialog">
                <p>
                    I want to remove the white space around the below buttons
                    so the hover effect extends to the edges of this dialog.
                    But I want to keep the white space around this text.
                </p>
                <div class="layout vertical">
                        <paper-button>One</paper-button>
                        <paper-button>Two</paper-button>
                        <paper-button>Three</paper-button>
                </div>
            </paper-dialog>
            <paper-button on-tap="openDialog">Open Dialog</paper-button>
        </template>
        <script>
            Polymer({
                is: 'x-element',
                openDialog: function(){
                    this.$.dialog.open();
                }
            });
        </script>
    </dom-module>


</body>
</html>
Solution

  • I think you just need to be a bit more specific on your selector try:

    paper-dialog div { 
  margin: 0;      
  padding: 0;     
}

    but this will style all the div elements so I'm not sure if that's what you were after.