2016-03-23 1 views
0

私のページに<md-subheader md-scroll-shrink>を使用していますが、ユーザーがスクロールしたときに上にくっついていません(scroll shrink demoのように)。角材が固まらない(md-scroll-shrink)

アイデア?多分私のレイアウトは問題を引き起こしているのでしょうか?

<body> 
    <div> 
    <md-toolbar md-scroll-shrink> 
    <div> 
     <md-sidenav> 
     <md-content> 
     <section> 
      <md-subheader> 
... 

ここにはcodepenがあります。

答えて

4

はい、レイアウトに問題があります。私は少し改造しました。 http://codepen.io/anon/pen/VabdzW

<div ng-app="MyApp" layout="column" ng-controller="MainCtrl as main" ng-cloak layout-fill> 
    <md-content flex layout="column"> 
    <md-toolbar flex="50"> 
      ... 
    </md-toolbar> 

    <div layout="row"> 
     <md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" layout-padding md-whiteframe="4"> 
      .. 
     </md-sidenav> 
     <md-content layout="column" layout-padding flex> 
      ..real content 
     </md-content> 
     </div> 
    </md-content> 
</div> 
+2

感謝を参照してください!あなたの答えに基づいて、上部の 'div'に' layout = "column" layout-fill "を追加するだけで動作します。 – lebolo

0

チェックにこのexample

<div ng-app="MyApp"> 
<div layout="column" ng-controller="MainCtrl as main" ng-cloak> 
<md-sidenav md-component-id="left" class="md-sidenav-left" md-swipe-left="toggleSidenav()" > 
    <md-menu-item> 
    menu 
    </md-menu-item> 
</md-sidenav> 

<md-content flex> 
<md-toolbar>  
    <div class="md-toolbar-tools" >   
     <md-button class="md-icon-button" aria-label="Menu" ng- click="toggleSidenav()"> 
      <md-icon>menu</md-icon> 
     </md-button> 
     <span flex> 
      <a class="md-title" href="">H3 TiP</a> 
      <span class="report-subtitle md-subhead">Sample Report</span> 
     </span>   
    </div>  
</md-toolbar> 

<md-content layout="column" layout-padding flex> content 
</md-content> 
</md-content></div></div> 
関連する問題