Polymer flex span funktioniert nicht

Ich habe versucht, das Polymer-Tutorial here zu folgen, aber die Symbole Teil funktioniert nicht für mich.Polymer flex span funktioniert nicht

Der entsprechende Code ist

<body class="fullbleed vertical layout"> 
    <paper-header-panel class="flex"> 
    <paper-toolbar> 
     <div>Header</div> 
     <span class="flex"></span> 
     <paper-icon-button icon="search"></paper-icon-button> 
    </paper-toolbar> 
    <div>Content</div> 
    </paper-header-panel> 
</body>

Die Flex-Spanne in der Mitte soll das Suchsymbol den ganzen Weg nach rechts schieben, aber es für mich nicht bei allen. Das Symbol zeigt sich unmittelbar nach dem Text, wie dieser

ich Chrome 52 auf Ubuntu verwende. Die nächste Frage, die ich zu meinem Problem finden könnte, ist this, aber sie berichten, dass die Spanne für sie funktioniert (unter Firefox 35).

Hinweis, hier sind meine Importe. Ich habe ein paar zusätzliche Importe für andere Papierkomponenten, aber das sollte nicht wichtig sein.

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"> 
<link rel="import" href="../../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html"> 
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">

Quelle

2016-10-06 Antimony

Beachten Sie, dass Polymer vor kurzem geändert, wie Sie mit Klassen beschäftigen (statt @apply in Ihrem CSS zu verwenden.)

Sie sind nicht Ihre vollständige Vorlage zeigt, aber der Stil-Tag sollte eine Include haben für die Eisenstücke, die du willst. Anstatt alles hier zu wiederholen, ist es am Anfang dieses Dokuments.

https://elements.polymer-project.org/guides/flex-layout

Aber Sie müssen die Klassen importieren, anstatt das Layout

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> und verwenden Sie die entsprechenden in Ihrem Stylesheet enthält <style include="iron-flex iron-flex-alignment">

Quelle

2016-10-06 17:10:25 akc42

Dank, den Import Eisen-flex-Layout-Klassen und das Hinzufügen des Stils include in meiner Vorlage fixierte alles. – Antimony

Polymer flex span funktioniert nicht

Antwort

Verwandte Themen