Полимер 1,0 размер бумаги для бумаги

У меня есть цикл, который проходит следующий код 4 раза, чтобы создать динамически четыре кнопки в бумажном меню.Полимер 1,0 размер бумаги для бумаги

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;

Когда sectionDisplayName короче, чем размер кнопки, кнопка сжимается как в:

Как я могу заставить что «цели» кнопку, чтобы соответствовать ширине меню?

спасибо.

источник

2016-03-03 Dave

Попробуйте добавить 'дисплей: блок;' к вашему стилю. Кроме того, используйте 'textContent' вместо' innerHTML', если на самом деле вам не нужен HTML, это хорошая привычка, которая увеличивает вашу защиту от XSS. –

Спасибо, @ScottMiles! Мне пришлось добавить display: block к стилю как для бумажного элемента, содержащего кнопку AND, так и для этой трюки. Я вернусь к textContent. Еще раз спасибо. – Dave

Я понимаю, что это не то, что вы просили точно, но fwiw, у Polymer есть инструменты, чтобы упростить это для вас. Например:

<!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>

источник

2016-03-03 20:42:34

Спасибо. Да, я видел это и играл с ним. – Dave

Полимер 1,0 размер бумаги для бумаги

ответ

Смежные вопросы