2016-04-28 9 views
2

Ich bin mit ui-Ansicht in md-Inhalt anzuzeigen und eine Liste, aber sein immer Überlauf ich will Liste in md-Inhalt machen sollte hier ist mein index.htmlWie md Inhalt scrollbaren in Angular Material Design-

scrollbaren seine
<div layout-lt-lg="row" class="screen-bg"> 
    <div flex-lt-lg="100"> 

     <!--header--> 
     <md-toolbar class="app-bar-bg" style="background-color: #9013fe;"> 
      <div class="status-bar-bg"></div> 
      <div class="md-toolbar-tools"> 

       <md-button class="md-icon-button" aria-label="Settings"> 
        <!--<md-icon md-svg-icon="app/images/back1.svg"></md-icon>--> 
       </md-button> 
       <h2> 
        <span></span> 
       </h2> 
       <span flex=""></span> 
       <md-button class="md-icon-button" aria-label="Favorite"> 
        <!--<md-icon md-svg-icon="app/images/a.svg"></md-icon>--> 
       </md-button> 

      </div> 
     </md-toolbar> 

     <!--content--> 
     <div> 
      <md-content> 

       <ui-view></ui-view> 
      </md-content> 
     </div> 
    </div> 
</div> 

hier ist meine Vorlage

<md-list flex> 
     <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts"> 
      <div class="md-list-item-text" layout="column" > 
      <h3>{{broadCast.name}}</h3> 
      <h3>{{broadCast.phone}}</h3> 
      </div> 
     </md-list-item> 
</md-list> 

Antwort

3

Um die Liste scrollbaren zu machen:

  1. eine Klasse md-Liste hinzufügen.

    <md-list class="make-scrollable" flex> 
        <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts"> 
        <div class="md-list-item-text" layout="column"> 
         <h3>{{broadCast.name}}</h3> 
         <h3>{{broadCast.phone}}</h3> 
        </div> 
        </md-list-item> 
    </md-list> 
    
  2. Stil der md-Liste in der CSS-Datei wie folgt:

    md-list.make-scrollable { 
        height: 600px; //Or any other height you wish 
        overflow-y: scroll; 
    } 
    

, dass die überquellenden Inhalt

+0

Das funktioniert, aber ich bin mir nicht sicher, ob es der beste Weg ist –

0

Sie verwenden zu viele unnötige Containerelemente.

<div layout-lt-lg="row" flex-lt-lg="100" class="screen-bg"> 
    <!--header--> 
    <md-toolbar class="app-bar-bg" style="background-color: #9013fe;"> 
     <div class="status-bar-bg"></div> //desired controller buttons 
     <div class="md-toolbar-tools"></div> //desired controller buttons 
    </md-toolbar> 

    <!--content--> 
    <md-content flex ui-view> 
    </md-content> 
</div> 

Hier ist ein funktionierendes Beispiel. Es gibt einige Änderungen, aber die grundlegende Struktur ist fast gleich.

+0

scrollbaren machen sollte ich habe ein ähnliches Problem. Ich verwende eckige Komponenten und der md-Inhalt wird in ein Komponentenelement eingeschlossen. Ich sehe keine Option, um das Komponentenelement fallen zu lassen und die Komponente überhaupt fallen zu lassen. Die Komponente skaliert weiter, und ich habe keine Ahnung, wie man sie scrollbar machen kann, anstatt ihr eine feste Höhe zu geben. –

Verwandte Themen