Polymer 1.0 paper-button sizing

Question

I have a loop that goes through the following code 4 times to create, dynamically, four buttons in a paper-menu .

button = document.createElement('paper-button');
sectionDisplayName = <my string>;
console.log(">"+sectionDisplayName+"<");
Polymer.dom(button).setAttribute("section", sectionDisplayName);
Polymer.dom(button).setAttribute("raised");
Polymer.dom(button).setAttribute("style","white-space:pre-wrap");
Polymer.dom(button).innerHTML = sectionDisplayName;

When the sectionDisplayName is shorter than the size of the button, the button shrinks as in:

How can I force that "Goals" button to fit the width of the menu?

Thank you.

Try adding display: block; to your style. Also, use textContent instead of innerHTML if you don't actually need HTML, it's a good habit that increases your defense against XSS. — Scott Miles
Thank you, @ScottMiles ! I had to add display: block to the style for both the paper-item that contains the button AND the button but that did the trick. I will switch back to textContent. Again, thank you. — Dave

Scott Miles Scott Miles · Accepted Answer · 2016-03-03T20:42:34

I realize this isn't what you asked exactly, but fwiw, Polymer has tools to simplify this for you. For example:

<!doctype html>
<head>
  <meta name="description" content="Polymer Example">
  <meta charset="utf-8">
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="paper-elements/paper-elements.html" rel="import">
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <paper-menu style="width: 200px;">
    <template is="dom-repeat">
      <paper-button section="{{item.name}}" raised style="white-space: pre-wrap; display:block">{{item.name}}</paper-button>
    </template>
  </paper-menu>
  <script>
    var sections = [
      {name: 'Health Concerns Document'},
      {name: 'Goals'},
      {name: 'Interventions Provided'},
      {name: 'Patient Problem Outcome'}
    ];
    document.querySelector('template').items = sections;
  </script>
</body>

Polymer 1.0 paper-button sizing

1 Answers