Creating a static footer in AngularJS with material design: A step-by-step guide

This is how I've set up my webpage design.

<div  layout="column" layout-fill ng-controller="MainCtrl as mc">
      <header>

        <md-toolbar md-scroll-shrink>
           <div layout="row" layout-align="center center" flex>
            HEADER INFORMATION
          </div>
        </md-toolbar>

      </header>

      <main>
        <div ui-view>
        </div>
      </main>

      <footer>
        <md-toolbar class="md-scroll-shrink">
          <div layout="row" layout-align="center center" flex>
            FOOTER INFORMATION
          </div>
        </md-toolbar>
      </footer>

</div>

Currently, the footer is positioned right after the main content. Depending on the size of the main content, the footer either appears in the middle of the screen or below the page height.

I aim to have the footer fixed at the bottom of the screen at all times. Additionally, I want there to be a scroll within the main content section based on its size.

If anyone has any suggestions or solutions, I would greatly appreciate it!

htmlcssangularjsmaterial-designangular-material

Answer №1

All you have to do is include <section flex> and apply the CSS rule overflow-y: auto;. Check out this live example: http://example.com

Answer №2

Place a mat-toolbar at the bottom of your webpage and apply this CSS spacer to ensure the text is centered:

<mat-toolbar color='primary'>
  <span class='spacer'></span>
    <h3>© Copyright Angular Apps 2017.</h3>
  <span class='spacer'></span>
</mat-toolbar>

Here is the CSS code for the spacer:

.spacer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

By following these steps, you can achieve a layout like this:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data from a nested object with varying key names through ng-repeat

My JSON object contains various properties with unique names: var definitions = { foo: { bar: {abc: '123'}, baz: 'def' }, qux: { broom: 'mop', earth: { tree: 'leaf', water: 'fi ...

javascriptjsonangularjs

What is the best way to switch an element's attributes using only JavaScript?

As I crafted this inquiry, I noticed that most of the analogous questions were along the lines of this one (where the user seeks to toggle an element's class using pure JS) or that one (where the user wants to toggle other attributes with jQuery). My ...

javascripthtml

Showing ng-attributes in haml partials in Rails using jQuery ajax and $q

As I work on developing an Angular Frontend for an existing Rails Application, I have come across the challenge of integrating $q in my current setup. While I understand that transitioning to a REST API served directly to ngResource would be ideal, the com ...

jqueryajaxcoffeescripthamlangularjs

How should I refer to this style of font?

After trying to implement a font from bulletproof @font-face as a template for my website, I am facing issues. My goal is to utilize the perspective-sans black regular font. Despite uploading the necessary files - including the css style sheet provided in ...

cssfontsfont-face

Issue encountered in Angularjs during upgrade process from version 1.2.27 to 1.4.7

Recently, I upgraded my app from using AngularJS 1.2.27 to version 1.4.7, but now I am encountering an error in the AngularJS file. SyntaxError: Unexpected token : (angular.js:12477) at Function (native) at Object.sd. ...

javascriptangularjs

Is there a way to move a placeholder to a small label in the top left corner when an input field is being used?

I've been searching for functional code, but everything I've tried so far hasn't worked. Does anyone have expertise in creating this animation using React? ...

htmlcssreactjsanimationinput

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below: <div class="products-btn"> <a href="products.html#pills-profile">view all</a> </div> On Pro ...

javascripthtmlcssbootstrap-5

Linking Angular 2 Production Mode to the vendor directory

I am currently working on an Angular2 project using the angular-cli npm package. To upload the app to the server, I used the following commands: ng build --prod and ng serve --prod. However, after uploading the dist folder to the server and trying to acc ...

angularjsangularangular-cli

Is it possible for Angular Parent & Child Scope to function properly within the $root scope?

I came across two examples showcasing parent and child scope inheritance. The first example utilizes parent and child controllers, while the second example relies on root scope. Interestingly, the second example does not produce the expected results. What ...

angularjsangularjs-scope

How can the Jquery UI Datepicker value be automatically set upon redirecting to this page?

When I submit a form and an error occurs, the value selected in the datepicker is not retained. The datepicker field remains empty. How is this possible? <html> <head> <script type="text/javascript" >. $(function() { ...

phpjqueryhtml

Nested Angular click events triggering within each other

In my page layout, I have set up the following configuration. https://i.stack.imgur.com/t7Mx4.png When I select the main box of a division, it becomes highlighted, and the related department and teams are updated in the tabs on the right. However, I also ...

javascripthtmlangular

LabeFor does not automatically create the display-lable class attribute

When setting up a new MVC project, the default Site.css file typically includes the following styles: /* Styles for editor and display helpers ----------------------------------------------------------*/ .display-label, .editor-label { font-weight: ...

cssasp.net-mvcmodel-view-controller

Modify the name format using an AngularJS directive

I've been struggling to understand how to effectively write AngularJS directives, even after reading various blogs. The issue I am facing is with an array of names in the format "lastname, firstname". My goal is to create a directive that will display ...

javascriptangularjsangularjs-directive

Mysterious issue with loading images in HTML and PHP

I've been dealing with a puzzling issue on my website design project. The logo image won't load in Firefox unless you hover over the ALT text, then it finally appears. However, this isn't an issue in IE where the logo displays properly. Thi ...

cssimagehtml

Styling the select dropdown border in Google Chrome

I am encountering an issue with styling HTML select options in Chrome. Despite successfully applying borders to each option in Firefox, I cannot get it to work in Chrome. Can anyone advise on how this can be achieved? <select id="sortingOptions" class= ...

htmlcssgoogle-chrome

Looping through mysql data horizontally within a div tag

Looking for assistance to create a content loop similar to the one on this website? I attempted to use a while() loop, but it ended up displaying vertically without using a table. I suspect this page utilizes thumbnails. What I aim for is to have the it ...

phphtmlmysqlcssloops

The ng-if directive seems to be causing issues within an ng-repeat loop when used in conjunction with bind-html

Below is the code I am using to bind html in my webpage: <div bind-html-compile="menuButtonView"></div> This is the code in my controller: dashboardService.getTemplateMetaData(data.templateCategory) .success(function(data) { console.lo ...

javascriptangularjsangularjs-ng-repeatangular-ng-ifng-bind-html

Tips for aligning a div (or any other content) in the center of a

I recently added a small div to my webpage to display 3 options in a stylish way, but I'm encountering an issue - the box is appearing on the left side instead of the center. I have tried using various CSS properties like align-items, align-content, a ...

htmlcss

Is it possible to redirect my PDF File to my PHP homepage?

Hi there, I've been looking for a solution to my issue. I have been using TCPDF-master to create a PDF report. However, after generating the PDF file and printing it out, I am unsure of how to redirect back to my transaction page. My current setup inv ...

phphtmlpdfmysqlitcpdf

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

javascriptioshtmlionic-frameworkhtml5-video