2015-02-10 50 views
5

Ho un problema nell'impostare le proprietà flex del mio layout. Ecco un plunker: http://embed.plnkr.co/0SrUp25FvT2PAsJDEwF3/previewLayout materiale angolare - problemi con flex

<md-content flex layout="row" layout-align="center"> 
    <div layout="column"> 
     <div flex layout="column" layout-fill> 
     <div flex="33"> 
      <md-input-container> 
      <label>Enter Room's Name</label> 
      <input ng-model="test" placeholder="Enter Room's Name"> 
      </md-input-container> 
     </div> 
     <div flex="66"> 
      <md-button class="md-raised md-accent"> 
      Create Chat Room 
      </md-button> 
     </div> 
     </div> 
    </div> 
    </md-content> 

Ecco il link alla documentazione: https://material.angularjs.org/#/layout/grid

Il problema che la proprietà flessione dell'input (testo) e ingresso (pulsante) non obbediscono l'attributo flex .

Quello che sto cercando di realizzare è qualcosa di simile: enter image description here

risposta

11

Ecco il risultato dopo che ho provato,

spero che aiuta:

<md-content layout="row" layout-align="center"> 
    <div layout="column"> 
    <div flex layout="column" layout-fill> <!-- this is what I change --> 
     <div flex="33"> 
     <md-input-container> 
      <label>Enter Room's Name</label> 
      <input ng-model="test" placeholder="Enter Room's Name"> 
     </md-input-container> 
     </div> 
     <div flex="66"> 
     <md-button class="md-raised md-accent"> 
      Create Chat Room 
     </md-button> 
     </div> 
    </div> 
    </div> 

</md-content> 
+0

cosa vuol dire quando c'è è semplicemente semplicemente flex e layout-fill attributi senza valore ..? –

+0

Layout-riempimento riempie interamente il div genitore. Avevi bisogno che fosse al 100% per far aderire i bambini alle impostazioni che hai dato loro. Un flex senza valore acquisirà lo spazio rimanente nel div. – nitimalh

Problemi correlati