Vue-material: md-app md-mode="fixed" not working

Created on 11 Dec 2017  路  4Comments  路  Source: vuematerial/vue-material

The md-mode="fixed" is not working if i want a full height page to be scrollable but keeping the toolbar fixed.

Someone have achieved this? Thanks!

<template>
  <div id="app" class="page-container">
    <md-app md-mode="fixed">
      <md-app-toolbar class="md-primary">
        <span class="md-title">My Title</span>
      </md-app-toolbar>
      <md-app-content>
        <router-view></router-view>
      </md-app-content>
    </md-app>
  </div>
</template>

<style lang="scss" scoped>

</style>

<script>
  export default {
    name: 'app'
  }
</script>
question

Most helpful comment

@Samuell1, tried this right now and does not work BUT it worked now when i tried this below.
Thanks so much and nice work with this awesome project! : )

max-height: 100vh;

<template>
  <div id="app" class="page-container">
    <md-app md-mode="fixed">
      <md-app-toolbar class="md-primary">
        <span class="md-title">My Title</span>
      </md-app-toolbar>
      <md-app-content>
        <router-view></router-view>
      </md-app-content>
    </md-app>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

<style lang="scss" scoped>
  .md-app {
    max-height: 100vh;
  }
</style>

All 4 comments

1256

You could add class or style on it.

If you want it with a 100% viewport height, try:

<template>
  <md-app class="full-height" md-mode="fixed">
  </md-app>
</template>

<style lang="scss" scoped>
.full-height {
  height: 100vh;
}
</style>

@VdustR, I tried this before, seeing exactly the #1256, but the toolbar is scrolling, like in the image attached.

captura de tela 2017-12-12 as 10 10 08

Remove root div that you have in your code.

@Samuell1, tried this right now and does not work BUT it worked now when i tried this below.
Thanks so much and nice work with this awesome project! : )

max-height: 100vh;

<template>
  <div id="app" class="page-container">
    <md-app md-mode="fixed">
      <md-app-toolbar class="md-primary">
        <span class="md-title">My Title</span>
      </md-app-toolbar>
      <md-app-content>
        <router-view></router-view>
      </md-app-content>
    </md-app>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

<style lang="scss" scoped>
  .md-app {
    max-height: 100vh;
  }
</style>

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bryanspearman picture bryanspearman  路  3Comments

bjarnik picture bjarnik  路  3Comments

Leshgan picture Leshgan  路  3Comments

andreujuanc picture andreujuanc  路  3Comments

korylprince picture korylprince  路  3Comments