Angular Material md-subheader not sticky

Question

I'm using several <md-subheader> s on my page, but they are not sticking to the top when the user scrolls down (like in the demo ).

Any ideas? Maybe my layout is causing the problem?

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

Here is a codepen .

Based on another question I had , just adding layout="column" layout-fill to the top div works, too.

Answer 1

The section s fit inside md-content . So, when you scroll, you don't scroll inside md-content . In order for the stickiness to work, you should scroll inside of md-content .

I gave a height of 500px to md-content so that you can see the effect.

<md-content layout="column" layout-padding flex style="height: 500px;">

    <!-- Report content -->

    <section ng-repeat="i in [1,2,3,4,5]">

Here is the working codepen .

Angular Material md-subheader not sticky

Question

1 answers

solution1
1 ACCPTED 2016-03-25 06:03:46

Angular Material md-subheader not sticky

Question

1 answers

solution1 1 ACCPTED 2016-03-25 06:03:46

solution1
1 ACCPTED 2016-03-25 06:03:46