angularjs Materiał Tab wysokość problem

Question

Mam trochę troube zastanawianie rzeczy z angularjs Materiał, zastanawiałem się, czy ktoś wiedział dlaczego folling kawałek kodu:

<md-tabs layout-fill > 

    <md-tab id="tab1"> 
     <md-tab-label>Item One</md-tab-label> 
     <md-tab-body> 

      <md-list> 
       <md-subheader class="md-no-sticky">3 line item</md-subheader> 
       <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]"> 

        <div class="md-list-item-text"> 
         <h3>sdfs</h3> 
         <h4>sdfsd</h4> 
         <p>sdfsdf</p> 
        </div> 
       </md-list-item> 

      </md-list> 
     </md-tab-body> 
    </md-tab> 

</md-tabs> 

produkuje this na firefox.

i this na chrome.

Przykro mi, że nie publikuję zdjęć bezpośrednio Nie mam wystarczającej reputacji.

Answer 1

Nie sądzę, że layout-fill będzie działać tak, jak zamierzacie w tym przypadku, ponieważ zakładka md określa nagłówek i treść, podczas gdy myślę, że chcesz, aby zawartość się rozwinęła, aby wypełnić rodzica.

Być może warto spróbować dodać opcję md-dynamic-height do dyrektywy md-tabs, która powinna wymusić materiał kątowy, aby ustawić stałą wysokość kart (y).

Answer 2

Musisz przekazać atrybut 'md-dynamic-height' do dyrektywy yr md-tabs. Poniższy kod zadziała poprawnie.

<md-content layout="column"> 
     <md-tabs md-dynamic-height flex> 

     <md-tab id="tab1"> 
      <md-tab-label>Item One</md-tab-label> 
      <md-tab-body> 
      <md-list> 
       <md-subheader class="md-no-sticky">3 line item</md-subheader> 
       <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]"> 
       <div class="md-list-item-text"> 
        <h3>sdfs</h3> 
        <h4>sdfsd</h4> 
        <p>sdfsdf</p> 
       </div> 
       </md-list-item> 
      </md-list> 
      </md-tab-body> 
     </md-tab> 

     <md-tab id="tab2"> 
      <md-tab-label>Item Two</md-tab-label> 
      <md-tab-body> 
      <md-list> 
       <md-subheader class="md-no-sticky">3 line item</md-subheader> 
       <md-list-item class="md-3-line" ng-repeat="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,50]"> 
       <div class="md-list-item-text"> 
        <h3>sdfs</h3> 
        <h4>sdfsd</h4> 
        <p>sdfsdf</p> 
       </div> 
       </md-list-item> 
      </md-list> 
     </md-tab-body> 
     </md-tab> 

    </md-tabs> 
</md-content> 

Answer 3

Miałem również podobny problem. Choć md-dynamic-height rozwiązać go ...

Można spróbować użyć:

<md-tabs md-dynamic-height> 
    <md-tab> 
    <md-tab-label>Tab label</md-tab-label> 
    <md-tab-body> 
     <md-content>The tab content</md-content> 
    </md-tab-body> 
    </md-tab> 
</md-tabs> 

Answer 4

Jeśli problem starasz się rozwiązać to, że karty nie zajmują całą dostępną wysokość:

1. Z tego, co wiem, nie można tego zrobić poprzez istniejące atrybuty md (i spędziłem wiele godzin na badaniu)

2. Nie zostanie to naprawione przez zespół ime wkrótce (patrz komentarz z ThomasBurleson w dniu 10 czerwca 2016 roku tutaj: https://github.com/angular/material/issues/2254)

3. Oto sposób, aby naprawić to, że pracował dla mnie:

   Upewnij każdy element nadrzędny ma layout="column" i layout-fill atrybuty (lub layout-column i layout-fill klas). Obejmuje to <ng-outlet>, jeśli jest to istotne dla twojego przypadku użycia.

WAŻNA INFORMACJA O niestandardowych składników założone za pośrednictwem COMPONENT Router:

W moim przypadku moja struktura HTML jest NG-wylot -> zamówienie komponent -> MD-karta -> MD-tabs

Dodałem layout="column" i layout-fill do <ng-outlet> i <md-card> i dodano layout="column" do <md-tabs>.Jednak nie mogłem znaleźć sposobu na dodanie ich do <account-component> (ponieważ jest on tworzony dynamicznie przez Angular), więc to, co w końcu robiłem, to dodanie tego (nieco zjadliwego) kodu do kontrolera komponentu (ES6, ale powinien być zrozumiały, nawet jeśli piszesz ES5):

import template from './account.html'; 

export const accountComponent = { 
    template: template, 
    controller: accountController, 
}; 

/*@ngInject*/ 
function accountController (accountService) { 
    this.data = accountService.getAccountData(); 

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/ 
    this.$routerOnActivate = function() { // nextRoute 
     const classes = document.querySelector('account-component').classList; 
     classes.add('layout-column'); 
     classes.add('layout-fill'); 
    }; 
}