Polymer 1.0: Vertically stacked group with no white space (iron-flex-layout)

Question

Question

How do I create a <paper-button> group UI element with the following characteristics?

It is a group of <paper-button> elements.
It is stacked vertically.
Each button fills the entire width of the container (without margin, padding or horizontal white space).
There is no margin, padding or vertical white space between the buttons.

Examples:

The effect I am seeking is analogous to <body fullbleed> only scoped to the button's parent container.
Similar to the Bootstrap "Vertical variation" shown here.
If you have Google Drive, hover your mouse over the menu items in the left margin of the page. (Under the red button labeled "New.")
Do a Google search. The dropdown menu that appears from the search field predictively suggesting possible questions you want is also another example of the look/feel I am after.

Attempts:

See below code for my previous attempts to:

stack vertical buttons using <p> tags and
use a <paper-menu>.

Research:

Demo: JS Bin

Code:

<!doctype html>
<html>
<head>
  <title>polymer</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
  <link rel="import" href="https://rawgit.com/PolymerElements/paper-button/master/paper-button.html">
</head>
<body>

<dom-module id="x-test" noscript>
  <template>

    <!-- Attempt #1: Stacking Buttons -->
    <div id="container">
      <p><paper-button>One</paper-button></p>
      <p><paper-button>Two</paper-button></p>
      <p><paper-button>Three</paper-button></p>
    </div>

    <!-- Attempt #2: <paper-menu> -->
    <paper-menu>
      <paper-item>One</paper-item>
      <paper-item>Two</paper-item>
      <paper-item>Three</paper-item>
    </paper-menu>

  </template>
</dom-module>

<x-test></x-test>

</body>
</html>

Can you create a demo of your code for us to look? – m4n0 Jul 20 '15 at 23:25 — m4n0, Jul 20 '15 at 23:25

Tasos · Answer 1 · 2015-07-21T12:51:01.220

I got my Vertical and Horizontal mixed up when i wrote this answer:)) so below is for horizontal Stacking. But thinking about its pretty much the same except for couple of changes.

So created a

 .vertical-section {
          min-width: 130px;
        }

and make the buttons inline or flex;

eg

paper-button {
      display: inline-block;  //or inline-flex
      margin-bottom: 24px;
    }

To get rid of padding/margin etc see below because it should be the same

I played around with the Css for the paper-buttons demo so the above changes will work

enter image description here

For Horizontal stacking

Looking at the demo here paper-buttons and right click to view frame source the code goes like this

<style is="custom-style">
    .horizontal-section {
      min-width: 130px;
    }

     paper-button {
      display: block;
      margin-bottom: 24px;
    }
</style>



    <div>
      <h4>Raised</h4>
      <div class="horizontal-section">
        <paper-button tabindex="0" raised>button</paper-button>
        <paper-button tabindex="0" raised class="colorful">colorful</paper-button>
        <paper-button tabindex="0" raised disabled>disabled</paper-button>
        <paper-button tabindex="0" raised noink>noink</paper-button>
        <paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
        <paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
      </div>
    </div>
</div>

That gives you something like this

enter image description here

Now as you dont want any margin/padding etc and fill the entire width you need to amend the css a bit and inspect the button element.

Take out the padding:24px; from the .horizontal-section eg padding:0;

enter image description here

And take out the paper-button:not margin-bottom:24px; and margin:0 0.25em; from paper-button css

enter image description here

and you end up with this

enter image description here

As you are using a template i beileve the styling may need to go before that.

Sorry i cant do you a demo, i managed to do a demo for someone in 0.5 but not yet for V.1 but its easy to understand the method above.

Thank you for this lovely answer @Tasos. I have upvoted it. I will test it soon and see if it works then, hopefully, I can accept it. I looked over your other recent posts. Nice work. So... upvotes! =] — Let Me Tink About It, Jul 21 '15 at 18:04

Andreas Galster · Accepted Answer · 2015-07-22T04:57:49.630

1

I'm super tired right now, will test an example tomorrow but I think theoretically all you'd have to do is:

<link href="bower/iron-flex-layout/iron-flex-layout.html" rel="import" >

<div class="layout vertical">
    <paper-button>foo</paper-button>
    <paper-button>foo</paper-button>
</div>

paper-button {
    width: 100%;
    margin:0;
}

Overview of new way of defining layout attributes with classes with the help of iron-flex-layout.html: http://embed.plnkr.co/1UKMQz/preview

edited Jul 22 '15 at 04:57

answered Jul 21 '15 at 18:27

Andreas Galster

415
4
17

Perfect! Thank you! You left off the `;` from your `width: 100%`. But it works great. Thanks. [Solution demo is here](http://jsbin.com/qewedoqito/1/edit?html,output). – Let Me Tink About It Jul 22 '15 at 00:55

score 0 · Answer 3 · answered Oct 25 '15 at 18:33

Demo: JS Bin

Code:

<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>
      paper-material {
        xheight: 400px;
        width: 400px;
        background-color: #ff1101;
        margin: 0 auto;
      }

      paper-button {
        width: 100%;
        margin: 0;
      }

      paper-button:hover {
        background-color: black;
        color: white;
      }
    </style>
    <template>
      <paper-material id="material" elevation="3">

        <div class="layout vertical">
          <paper-button>One</paper-button>
          <paper-button>Two</paper-button>
          <paper-button>Three</paper-button>
        </div>

      </paper-material>
    </template>
    <script>
      Polymer({
        is: 'x-element',
        behaviors: [
          Polymer.NeonAnimationRunnerBehavior,
        ],

        properties: {
          animationConfig: {
            value: function() {
              return {
                'entry': {
                  name: 'slide-down-animation',
                  node: this.$.material
                },
                'exit': {
                  name: 'slide-up-animation',
                  node: this.$.material
                }
              }
            }
          }
        },
        ready: function() {
          this.playAnimation('entry');
        }
      });
    </script>
  </dom-module>


</body>

</html>

Polymer 1.0: Vertically stacked group with no white space (iron-flex-layout)

Question

3 Answers3