2017-01-13 106 views
0

当我使用md-tabs将其中一个标签放在另一个标签中时,我尝试在md-align-tabs属性的上部标签上更改,它也反映在内部标签中。内部标签中的角度材质标签问题

我怎样才能阻止这种情况发生

<md-content layout="column" layout-fill> 
 
\t <md-tabs layout="column" class="md-primary" md-selected="data.selectedIndex" md-align-tabs="{{checks[data.selectedIndex] ?'bottom':'top'}}" layout-fill > 
 
     <md-tab id="Tab{{checkBottom}}" ng-repeat="checkBottom in checkDataBottom"> 
 
     <md-tab-label>Tab{{checkBottom+1}}</md-tab-label> 
 
      <md-tab-body> 
 
\t \t <div class="md-padding" layout="row" layout-sm="column" layout-align="left center"> 
 
      <md-checkbox ng-value="true" ng-model="checks[checkBottom]" ng-change="change()" aria-label="Align tabs to bottom?" style="margin: 5px;">Tab to bottom</md-checkbox> 
 
      <md-content layout="column" layout-fill> 
 
       <md-tabs layout="column" class="md-primary" md-selected="data2.selectedIndex" md-align-tabs="{{checksX[data2.selectedIndex] ?'bottom':'top'}}" layout-fill > 
 
       \t <md-tab id="Tab{{checksXy}}" ng-repeat="checksXy in checkDataBottom"> 
 
        \t <md-tab-label>Tab{{checksXy+1}}</md-tab-label> 
 
        \t <md-tab-body> 
 
\t \t \t \t  <div class="md-padding" layout="row" layout-sm="column" layout-align="left center"> 
 
      \t \t  <md-checkbox ng-value="true" ng-model="checksX[checksXy]" ng-change="change()" aria-label="Align tabs to bottom?" style="margin: 5px;">Tab to bottom</md-checkbox> 
 
         </div> 
 
      \t \t </md-tab-body> 
 
       \t </md-tab> 
 
       </md-tabs> 
 
      \t </md-content> 
 
     </div> 
 
     </md-tab-body> 
 
     </md-tab> 
 
     </md-tabs> 
 
    </md-content>

+0

安置自己在这里的代码 – Sajeetharan

回答

0

它看起来像在角材料的某种错误。 但是尽量

md-tabs[md-align-tabs="top"] > md-tabs-wrapper{ 
    bottom: initial; 
    left: initial; 
    right: initial; 
    position: initial; 
    height: initial; 
    z-index: initial; 
} 

添加到您的CSS文件,我认为这将有助于。

这里是codepen例如:http://codepen.io/anon/pen/qRNmwV

+0

没有它不工作。 –

+0

现在它在同一个地方,但它隐藏起来 –

+0

这个解决方案解决了当我试图从角度材质演示中使用codepen重现它时的问题。但也许你还有一些其他的错误。如果您在某种类型的codepen,jsfiddle或plunker中重新创建问题,将会更容易。 –