Материал AngularJS: в пользовательских компонентах нет полосы прокрутки - PullRequest
Новая
       18

Материал AngularJS: в пользовательских компонентах нет полосы прокрутки

0 голосов
/ 01 июля 2018

Недавно я обнаружил фреймворк AngularJS Material и теперь пытаюсь его использовать. Впервые я не нашел подобной темы, поэтому смею спросить. Когда я добавляю свои пользовательские компоненты, как это: 

<body ng-app="katalogApp" layout="column">
    <katalog></katalog>
</body>

... все работает довольно хорошо, кроме гибкой прокрутки. После вставки шаблона компонента прямо в приложение: 

<body ng-app="katalogApp" layout="column">
    <div layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp" layout="column">
    it has a scrollbar
        </md-sidenav>
        <md-content flex>
            content
        </md-content>
    </div>
</body>

... это работает, но это чертовски грязно. Если я добавлю css: 

md-sidenav {position:fixed!important}

к контейнеру - есть полоса прокрутки, но содержимое не на месте. Буду признателен, если кто-нибудь знает, как с этим бороться.

Вот плункер

1 Ответ

0 голосов
/ 01 июля 2018

Вместо позиционирования тега md-sidenav вы можете задать sidenav высоту, чтобы он имел полосу прокрутки и, соответственно, высоту для основного содержимого. Теперь вы можете добавить новый класс в md-sidenav с помощью css как: 

.leftSideNav {
  height: 100vh;
}
.content {
  height: 100vh;
  padding: 7px;
}

Где я добавил эти классы в md-sidenav & md-content соответственно: 

<body ng-app="katalogApp" layout="column">
    <div layout="row" flex>
        <md-sidenav md-is-locked-open="true" class="md-whiteframe-4dp leftSideNav" layout="column">
    it has a scrollbar
        </md-sidenav>
        <md-content flex class="content">
            content
        </md-content>
    </div>
</body>

Пример поршня

...