Ich möchte meine Tasten am Ende in einem Papier-Dialog ausrichten

Question

Ich habe eine paper-dialog mit einer festen Größe und ich möchte eine <div> mit einem Knopf am Ende ausrichten. Die paper-dialog enthält eine header, paper-tabs, die die folgenden iron-pages steuert. Die iron-pages enthalten die Schaltfläche.

<style is="custom-style"> 
    paper-dialog { 
       width: 1000px; 
       height: 585px; 
    } 
</style> 

<paper-dialog> 
    <header>Header</header> 
    <paper-tabs selected="{{selected}}> 
     <paper-tab> tab1</paper-tab> 
     <paper-tab> tab2</paper-tab> 
    </paper-tabs> 
    <iron-pages selected="{{selected}}"> 
     <div id="tab1" container class="container layout vertical"> 
      <div> Text section tab1</div> 
      <div class="flex></div> 
      <div> 
       <paper-button id="toBeAlignedAtTheBottom">next!</paper-button> 
      </div> 
     </div> 
     <div id="tab2" container class="container layout vertical"> 
      <div> Text section tab2</div> 
      <div class="flex></div> 
      <div> 
       <paper-button id="toBeAlignedAtTheBottom">next!</paper-button> 
      </div> 
     </div> 
    </iron-pages> 
</paper-dialog> 

Aber ich kann nie die Tasten bekommen am Ende des paper-dialog ausgerichtet werden. Nur mit einer festen Größe für die Container-Klassen innerhalb der iron-pages. Die Länge des Textabschnitts in tab1 und tab2 ist sehr unterschiedlich. Deshalb möchte ich ändern, wie die Tasten ausgerichtet sind und auf der Taste positioniert sind. Wie kann ich dies tun, ohne eine feste Größe zu verwenden?

Answer 1

Ich löste mein Problem. Das Problem bestand darin, dass jede Elternklasse der Schaltflächen den gesamten verbleibenden Speicherplatz verwenden musste. Fügen Sie also zu jeder Elternklasse flex hinzu. Zweitens fügen Sie end hinzu, um die Knöpfe auf der Unterseite zu positionieren.

<style is="custom-style"> 
    paper-dialog { 
       width: 1000px; 
       height: 585px; 
    } 
</style> 

<paper-dialog class="flex layout vertical"> 
    <header>Header</header> 
    <paper-tabs selected="{{selected}}> 
     <paper-tab> tab1</paper-tab> 
     <paper-tab> tab2</paper-tab> 
    </paper-tabs> 
    <iron-pages class="flex layout vertical" selected="{{selected}}"> 
     <div id="tab1" container class="container flex layout vertical"> 
      <div> Text section tab1</div> 
      <div class="flex></div> 
      <div class="layout horizontal end"> 
       <paper-button id="toBeAlignedAtTheBottom">next!</paper-button> 
      </div> 
     </div> 
     <div id="tab2" container class="container layout vertical"> 
      <div> Text section tab2</div> 
      <div class="flex></div> 
      <div> 
       <paper-button id="toBeAlignedAtTheBottom">next!</paper-button> 
      </div> 
     </div> 
    </iron-pages> 
</paper-dialog> 

Siehe auch: Fill page with iron-pages element