CODEWITHSUNDEEP
angularjscssangular-material
Sim
Sim

Reputation: 29

Angular Materials - Footer after md-content scroll

I'm currently designing an app using Angular Materials, but I have encountered a layout problem. The app is divided in half with a sticky header. The left side does not scroll, but the right side will scroll. If you are scrolling through the content on the right side and reach the end, the ENTIRE page will then scroll to display a footer.

I've tried many combinations, but can't get the desired result. Any help is appreciated

Before Scrolling: Before Scrolling

After scrolling to the end: After scrolling to the end

Current code:

<body layout="column">

<md-toolbar>
    <h2 class="md-toolbar-tools"> 
        <md-button class="md-raised">Sign In</md-button>
    </h2>  
</md-toolbar>

<div ng-controller="LandingController" layout="row">

        <!-- Left Side -->
        <div flex class="search-background" layout ="row" layout-align="center center">
            <md-input-container layout="row">
                <label>Something</label>
                <input ng-model="airport">
            </md-input-container>
            <md-button>Search</md-button>
        </div>

        <!-- Right Side -->
        <md-content flex layout-padding>
            <p> Text that overflows </p>
        </md-content>
</div>

<!-- Where do I put the footer/format the layout -->

<script type="text/javascript" src="js/app/all.min.js"></script>

Upvotes: 2

Views: 1471

Answers (1)

Rahul
Rahul

Reputation: 685

I have a jsfiddle for something similar to that, hope it works for you. Feel free to update the same.

jsFiddle

<body ng-app="layout" ng-controller="AppCtrl">
  <div layout="row" flex>
    <div layout="column">
      <md-toolbar md-whiteframe="2">
        <div class="md-toolbar-tools">
          <span>Material header</span>
          <span flex></span>
        </div>
      </md-toolbar>
    </div>
  </div>
  <div layout="row" layout-xs="column">
    <div class="content-section" flex>
      Should not scroll
      </div>
    <div class="content-section" flex>
      <div class="text-center">
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
        This Scroll
        <br/><br/><br/><br/><br/><br/><br/>
      </div>
      </div>
  </div>
  <div layout="row" flex>
    <div layout="column">
      <md-toolbar md-whiteframe="2">
        <div class="md-toolbar-tools">
          <span>Material footer</span>
          <span flex></span>
        </div>
      </md-toolbar>
    </div>
  </div>
</body>

CSS

html,
body {
  overflow: hidden;
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

.content-section {
  height: calc(100vh - 128px)!important;
  overflow-y: auto;
}

Upvotes: 2

Related Questions