2016-03-08 62 views
3

我正在嘗試使用角度材質和使用md-tabs,但是由於某些原因,在應用md-dynamic-height選項卡時內容是否超出屏幕的長度。我只是滾動的內容無法弄清楚我做錯了什麼。這是我正在做的一個例子。角材質md-tabs:設置md-dynamic-height導致製表符滾動而不是內容

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content> 
<!--First Tab--> 
<md-tab md-dynamic-height label="First INFO"> 
    <div class=""> 
     <div class="bold"> 

     </div> 
     <hr /> 
     <img src="images/map-pin.png" width="45" height="45" class="left up10" /> 
     <button class="btn-icon right up10"/> 
      <img src="images/compose.svg" width="25" height="25" /> 
     </button> 
     <span></span> 
     <div > 

     </div> 
     <div style="clear: both"></div> 
    </div> 
</md-tab> 
<!--Second Tab--> 
<md-tab md-dynamic-height label="Second INFO"> 
    <div class=""> 
     <div class="bold"> 

     </div> 
     <hr /> 
     <img src="images/map-pin.png" width="45" height="45" class="left up10" /> 
     <button class="btn-icon right up10"/> 
      <img src="images/compose.svg" width="25" height="25" /> 
     </button> 
     <span></span> 
     <div > 

     </div> 
     <div style="clear: both"></div> 
    </div> 
</md-tab> 
<!--Third Tab--> 
<md-tab md-dynamic-height label="Third INFO"> 
    <div class=""> 
     <div class="bold"> 

     </div> 
     <hr /> 
     <img src="images/map-pin.png" width="45" height="45" class="left up10" /> 
     <button class="btn-icon right up10"/> 
      <img src="images/compose.svg" width="25" height="25" /> 
     </button> 
     <span></span> 
     <div > 

     </div> 
     <div style="clear: both"></div> 
    </div> 
</md-tab> 

+0

檢查這個http://stackoverflow.com/questions/35525497/scrollable-content- elements-with-angular-material-dynamic-height-tabs – kTn

+0

我無法得到它爲我工作。提琴手鍊接工作正常。當我嘗試應用我正在做的事情時,它不起作用。 –

回答

0

嘗試md-dynamic-height=""在MD標籤

​​
2

樣品佈局:

<md-tabs md-dynamic-height md-border-bottom md-center-tabs md-stretch-tabs md-swipe-content> 
    <md-tab label="1"> 
     <md-content style="height:100%"> 
     tab content here 
     </md-content> 
    </md-tab> 
    <md-tab label="2"> 
     <md-content style="height:100%"> 
     tab content here 
     </md-content> 
    </md-tab> 
    <md-tab label="3"> 
     <md-content style="height:100%"> 
     tab content here 
     </md-content> 
    </md-tab> 
</md-tabs> 
相關問題