CODEWITHSUNDEEP
javascriptcssangularjsangular-material
Jess Anastasio
Jess Anastasio

Reputation: 707

Angular Material md-toolbar/md-content double scroll bar

I am having an issue with my site creating two scroll bars. I am using md-toolbar for my nav (which I want to be stuck to the top throughout) and md-content to hold my content. When I scroll the nav stays stuck to the top but creates an extra scroll bar. (see to the right of the pic there is two scroll bars)

see double scroll to right

Here is my index.html: 

<body ng-cloak ng-app="TrooNews" ng-controller="AppController as app">

        <!--top toolbar-->
        <md-toolbar class="md-shadow-bottom-z-1">
            <div class="md-toolbar-tools">
                <md-button class="md-icon-button" ng-click="app.toggleSidenav('left')" hide-gt-md1 aria-label="Menu">
                    <md-icon>menu</md-icon>
                </md-button>
                <a href="/home"><h1>Troo News</h1></a>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="" hide-gt-md1 aria-label="Search">
                    <md-icon>search</md-icon>
                </md-button>
            </div>
        </md-toolbar>

        <!--left sidenav-->
        <div layout="row" layout-fill flex>
            <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
                <md-toolbar></md-toolbar>
                <md-content flex role="navigation">
                    <md-list>
                        <md-list-item ng-repeat="item in app.menu" ng-click="app.navigateTo(item.link)">
                            <md-icon>{{item.icon}}</md-icon>
                            <p>{{item.title}}</p>
                        </md-list-item>
                    </md-list>
                </md-content>
            </md-sidenav>
            <div layout="column" layout-fill ng-viewport></div>
        </div>

        <div ng-view class="content"></div>

    </body>

And my html for my card view:

<md-content class="container-fluid">
    <section class="content-section">
      <div layout="column" layout-align="center" ng-style="{'width': '100%'}">
        <div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap>
          <md-card ng-repeat="article in home.articles">
            <img ng-src="{{article.imagePath}}" class="md-card-image" alt="Test image">
            <md-card-title>
              <md-card-title-text>
                <a href="/article/{{article.id}}"><span class="md-headline">{{article.title}}</span></a>
              </md-card-title-text>
            </md-card-title>
            <md-card-content>
              <p>
                {{article.text}}
              </p>
            </md-card-content>
            <md-card-actions layout="row" layout-align="end center">
              <md-button class="md-icon-button" aria-label="Report">
                <md-icon class="material-icons">report problem</md-icon>
              </md-button>
              <md-button class="md-icon-button" aria-label="Share">
                <md-icon class="material-icons">share</md-icon>
              </md-button>
            </md-card-actions>
          </md-card>
        </div>
      </div>
    </section>
</md-content>

And my CSS: 

body {
    background-color: #EEEEEE;
}

md-toolbar {
    z-index: 100;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color:#3F51B5;
}

md-card {
    width:400px;
}

Upvotes: 1

Views: 4957

Answers (1)

Alex Mounir
Alex Mounir

Reputation: 1241

The toolbar sticks to the md-content not the body -> the inner scrollbar and like the website of angular material they remove the main scroll and use: body { overflow: hidden; max-width: 100%; max-height: 100%; } and keep the internal one only.

Upvotes: 6

Related Questions